如果 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; }

现在效果很差，为什么现在的fieldsets会铺满整个屏幕？

Answer 1

那是因为 <fieldset> 是块级元素。块级元素本质上想要占据其父元素的全宽。

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

应用position: absolute; 会影响它的块级布局。该元素从正常文档流中取出，导致该元素不占用任何 space。但是它的内容确实占用了 space。因此，元素的尺寸实际上变成了 space 它的内容所占的空间。换句话说，它 "shrinks" 到内容维度。

这是一个例子。

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

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

Why the width of my fieldsets changes so much if position = relative or absolute?

html

css

css-position

fieldset