Почему ширина моих полей меняется так сильно, если позиция = относительная или абсолютная?

Question

Это форма, она работает очень хорошо с FIELDSET расположенной абсолютным

<form name="register" method="post" action="login.php"> 
    <fieldset id="login"> 
     <legend><h4>Bent u reeds klant?</h4></legend> 
     <label> E-mailadres : </label><input name="mail" type="text" id="mail"><br> 
     <label>Password : </label><input name="pass" type="password" id="pass"><br> 
     <label></label><input type="submit" name="submit1" value="OK"><br> 
     <label></label><a href="passReset.php">Paswoord vergeten?</a><br> 
    </fieldset> 
</form> 

<form name="register" method="post" action="login.php"> 
    <fieldset id="subscribe"> 
     <legend><h4>Wordt nieuwe klant!</h4></legend> 
     <label>E-mailadres : </label><input name="mail" type="text" id="mail"><br> 
     <label></label><input type="submit" name="submit2" value="OK"> 
    </fieldset> 
</form> 

вот моя первая CSS, это работает нормально

#login { 
position: absolute; 
top: 300px; 
left:200px; 
border: 1px black solid; 
border-radius: 10px; 
} 



#subscribe{ 
position:absolute; 
top: 300px; 
left:550px; 
border: 1px black solid; 
border-radius: 10px; 
} 

label { 
padding: 6px; 
width: 6em; 
display: inline-block; 
} 

Теперь я изменить положение с абсолютного на относительный и наборы полей становятся слишком широкими

#login { 

position: relative; 
top: 300px; 
left:200px; 
border: 1px black solid; 
border-radius: 10px; 

} 
subscribe{ 

position:relative; 
top: 300px; 
left:550px; 
border: 1px black solid; 
border-radius: 10px; 
} 

label { 
padding: 6px; width: 6em; display: inline-block; } 

Теперь результат очень плохой, почему поля теперь растянуты по всему экрану?

Answer 1

Это потому, что <fieldset> является элементом уровня блока. Элементы уровня блока по своей природе хотят занять полную ширину их родительского элемента.

Применение position: relative;не влияет на его расположение на уровне блока. Элемент остается в нормальном потоке документа, то есть все работает так, как ожидалось.

Применение position: absolute; влияет на макет уровня блока. Элемент извлекается из обычного потока документов, заставляя элемент не занимать места. Это содержание, однако, занимает место. Таким образом, размеры элемента эффективно становятся тем местом, которое занимает контент. Другими словами, он «сжимается» до размеров контента.

Вот пример.

.example-default { 
 
    background-color: yellow; 
 
} 
 
.example-absolute { 
 
    position: absolute; 
 
    background-color: lime; 
 
}

<div class="example-default">Hello, I'm using <strong>relative</strong> positioning.</div> 
 
<div class="example-absolute">Hello, I'm using <strong>absolute</strong> positioning.</div>