html - 如果 position = relative 或 absolute，为什么我的字段集的宽度变化如此之大？

Question

这是一个表单，它与绝对定位的字段集配合得很好

<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>是 block 级元素。 block 级元素本质上想要占据其父元素的完整宽度。

正在申请 position: relative; 不影响它的 block 级布局。该元素保留在正常的文档流中，这意味着一切都按预期进行。

正在申请 position: absolute; 确实影响它的 block 级布局。该元素从正常文档流中取出，导致该元素不占用任何空间。但是它的内容确实占用了空间。所以元素的尺寸实际上变成了它的内容占据的空间。换句话说，它“缩小”到内容维度。

这是一个例子。

.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>