Question 138681 in Html Question posted in
Some basic documentation can be found here.

Is my input label overlapping the other label in HTML?

My first input label is in the correct place but my second one (Last Name) is overlapping the First name one. How can i correct this? I have tried removing the position:absolute from .itemForm label but this doesn’t work cause I want the label to be located on top of the user’s input.

    .lineForm {
    display: flex;
    flex-direction: column;
}

.itemForm {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.itemForm input,
.itemForm select {
    width: 100%;
    padding: 26px 16px 10px 16px;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 16px;
    font-size: 16px;
    color: #222222;
}

.itemForm label {
    font-size: 12px;
    color: #7B7B7B;
    position: absolute;
    top: 8px;
    left: 16px;
}
<div class="contentForm">
                <div class="lineForm">
                    <div class="itemForm">
                        <div>
                            <input id="firstname" name="Firstname" type="text" class="formInput" required="">
                            <label for="nome">First name</label>
                        </div>
                        <div>
                            <input id="lastname" name="Lastname" type="text" class="formInput" required="">
                            <label for="sobrenome">Last Name</label>
                        </div>                        
                    </div>
                    <div class="itemForm">
                        <input id="tel" name="Telefone" value="(21) 00000-0000" type="tel" required="">
                        <label>Telefone</label>
                    </div>                     
                </div>        
            </div>
Tags:

2

Answers


  1. 0

    add position: relative to the parent div

    .itemForm > div {
  position: relative; 
}

    .lineForm {
    display: flex;
    flex-direction: column;
}

.itemForm {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.itemForm > div {
  position: relative; 
}

.itemForm input,
.itemForm select {
    width: 100%;
    padding: 26px 16px 10px 16px;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 16px;
    font-size: 16px;
    color: #222222;
}

.itemForm label {
    font-size: 12px;
    color: #7B7B7B;
    position: absolute;
    top: 8px;
    left: 16px;
}
    <div class="contentForm">
                <div class="lineForm">
                    <div class="itemForm">
                        <div>
                            <input id="firstname" name="Firstname" type="text" class="formInput" required="">
                            <label for="nome">First name</label>
                        </div>
                        <div>
                            <input id="lastname" name="Lastname" type="text" class="formInput" required="">
                            <label for="sobrenome">Last Name</label>
                        </div>                        
                    </div>
                    <div class="itemForm">
                        <input id="tel" name="Telefone" value="(21) 00000-0000" type="tel" required="">
                        <label>Telefone</label>
                    </div>                     
                </div>        
            </div>
    Login or Signup to reply.
  2. 0

    You have given position absolute to labels. But you didn’t gave position relative to their parent div’s. Add CSS:-

    .itemForm > div{
   position: relative;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search