css 理解不同的嵌套元素如何具有“固定”和“绝对”位置行为

s5a0g9ez  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(109)

这是一个简单的代码,但我还没有能够找到一个明确的答案
据我所知,所有绝对定位的HTML元素的位置都是基于最近的非静态/定位祖先(因此任何固定或相对祖先都会影响绝对定位元素的位置)。如果我错了,请
具有“固定”位置的元素始终基于视口获取其位置。说到这里,我给予你这个代码:

* {
  margin: 0;
  padding: 0;
}

div {
  height: 100px;
  width: 100px;
  background-color: blue;
}

div > div {
  height: 30px;
  width: 30px;
  background-color: red;
  position: fixed;
  top: 5px;
}

#children {
  height: 20px;
  width: 20px;
  background-color: green;
  position: absolute;
  top: 0px;
}
<div>
  <div id="parent"></div>
  <div id="children"></div>
</div>

结果如下:

为什么在手动设置#children元素位置时使用“top:0 px”没有相对于#parent元素向下移动1 px?因为绝对定位元素的位置是基于固定元素的?

lokaqttq

lokaqttq1#

固定的HTML位置在应用程序打开时将元素固定在屏幕的同一位置。父组件仅被考虑以将其作为元素在加载网页时将具有的位置的初始坐标的参考,并且其将保持直到网页运行。
所以是的,你有理由它会在子元素中生效。

相关问题