问题描述
我只是在学习在css中的定位。根据我觉得有用的那篇文章，我已经开始尝试了。
使用以下代码，我无法理解为什么绝对灰盒div位于其相对父级之外。我原以为灰色框会在容器的左上角。 数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
.container {
background: lightblue;
position: relative;
}
.box-orange {
background: orange;
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
/*position: static;*/
}
.box-green {
background: lightgreen;
height: 100px;
width: 100px;
position: relative;
top: -105px;
left: 105px;
z-index: 2;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}<div class="container">
<div class="box-orange"></div>
<div class="box-blue"></div>
<div class="box-green"></div>
<div class="box-grey"></div>
</div>也不能理解在下面的情况下，为什么灰色框不在左上角，而是移动到橙色框留下的空白处之后。我刚刚将灰色框移到了容器div中的第二个位置。 数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
.container {
background: lightblue;
position: relative;
}
.box-orange {
background: orange;
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
/*position: static;*/
}
.box-green {
background: lightgreen;
height: 100px;
width: 100px;
position: relative;
top: -105px;
left: 105px;
z-index: 2;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}<div class="container">
<div class="box-orange"></div>
<div class="box-grey"></div>
<div class="box-blue"></div>
<div class="box-green"></div>
</div>我找到的所有详细文档(例如MDN)和教程，只是用2-3个盒子演示了非常简单的示例。
推荐答案
要正确理解这一点，您需要参考official specification中找到元素必须满足的方程式：
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
我们没有任何边框和填充，因此在您的情况下只需：
'top' + 'margin-top' + 'height' + 'margin-bottom' + 'bottom' = height of containing block
如果你在下面阅读，你会发现：
因此，在您情况下，您已经设置了高度，并将
- ‘top’和‘Bottom’是‘Auto’，而‘Height’不是‘Auto’，然后将‘top’设置为静态位置，将‘March-top’和‘March-Bottom’的‘Auto’值设置为0，并为‘Bottom’解算。
top/bottom保持为自动，因此顶部将设置为静态位置..更准确地说，‘top’的静态位置是从包含块的上边缘到假设框的上边距边缘的距离，如果它指定的‘Position’值为‘Static’，则该框应该是元素的第一个框。
为方便起见，如果未设置position:absolute，则为元素的位置。
这里有一个简单的插图，可以更好地理解
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">.container {
background: lightblue;
position: relative;
padding:40px 20px;
display:inline-block;
vertical-align:top;
width: 250px;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}
.box-green {
height:20px;
background:green;
}<div class="container">
<div class="box-green"></div>
<div class="box-grey" style="position:static;">I am static</div>
</div>
<div class="container">
<div class="box-green"></div>
<div class="box-grey">I am absolute</div>
</div>position:absolute，则第一个元素的静态位置将保持不变。我们未指定任何顶值，因此浏览器将使用元素的position:static(默认位置)之一的默认值。
如果您不想这样，只需设置最大值，您就符合以下规则：
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
- ‘底部’为‘自动’，‘顶部’和‘高度’不是‘自动’，然后将‘页边距-顶部’和‘页边距-底部’的‘自动’值设置为0，并求解‘底部’
.container {
background: lightblue;
position: relative;
padding:40px 20px;
display:inline-block;
vertical-align:top;
width: 250px;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
top:0;
}
.box-green {
height:20px;
background:green;
}<div class="container">
<div class="box-green"></div>
<div class="box-grey" style="position:static;">I am static</div>
</div>
<div class="container">
<div class="box-green"></div>
<div class="box-grey"></div>
</div>同样的逻辑也适用于the left property
您可能还注意到包含块的单词的用法，它在这里非常重要，在same specification
中进行了解释元素框的位置和大小有时是相对于某个矩形计算的，该矩形称为元素的包含块。元素的包含块定义如下：...
- 如果元素具有‘Position：Absite’，则包含块由最近的祖先使用‘Posite’、‘Relative’或‘Fixed’建立，其方式如下：
...
这还不够，因为还有其他属性(如下所列)也可以建立包含块，以便您可以相对于未定位的祖先定位元素！
相关：Why does applying a CSS-Filter on the parent break the child positioning?
这篇关于为什么我的绝对/固定位置元素没有位于我预期的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！