为什么我的绝对/固定位置元素没有位于我预期的位置?

Why arenamp;#39;t my absolutely/fixed-positioned elements located where I expect?(为什么我的绝对/固定位置元素没有位于我预期的位置?)
本文介绍了为什么我的绝对/固定位置元素没有位于我预期的位置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我只是在学习在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

如果你在下面阅读,你会发现:

  1. ‘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(默认位置)之一的默认值。

如果您不想这样,只需设置最大值,您就符合以下规则:

  1. ‘底部’为‘自动’,‘顶部’和‘高度’不是‘自动’,然后将‘页边距-顶部’和‘页边距-底部’的‘自动’值设置为0,并求解‘底部’
数据-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;
  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

中进行了解释
元素框的位置和大小有时是相对于某个矩形计算的,该矩形称为元素的包含块。元素的包含块定义如下:

...

  1. 如果元素具有‘Position:Absite’,则包含块由最近的祖先使用‘Posite’、‘Relative’或‘Fixed’建立,其方式如下:

...

这还不够,因为还有其他属性(如下所列)也可以建立包含块,以便您可以相对于未定位的祖先定位元素!

相关:Why does applying a CSS-Filter on the parent break the child positioning?

这篇关于为什么我的绝对/固定位置元素没有位于我预期的位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
element el-tree树结构刷新后保留展开状态解决方法 我们在使用element的el-tree组件的时候,当我们给树结构重新赋值后,树节点就全部自动合上了。所以我们要记录展开状态,方法如下 html代码如下: el-tree ref="tree" :data="treeList" :highlight-current="true" :
js输出当前日期和时间的实例代码,具体实例代码如下,有兴趣的朋友可以尝试运行下。 !doctype htmlhtml lang="en" head meta charset="UTF-8" title获取当前时间/title /head body script type="text/javascript" /** *获取当前时间 *format=1精确到天 *format=2精确到秒 */ function
html页面:添加这一行 contentType: application/x-www-form-urlencoded !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title显示小区信息/title script src="https://cdn.staticfile.org/jquery/1.10.2/jq
p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-