Question

总结：在任何情况下，绝对定位的元素是否关心其兄弟姐妹（兄弟姐妹是相对的，绝对的，静态的）？

我的理解是绝对定位忽略了兄弟姐妹。

.absoluteBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: yellow;
  border: 1px solid red;
  box-sizing: border-box;
  top: 0;
  /* 
why is top 0 necessary?
If i do not set it, the inner yellow box will position itself after the grey box
The grey box has no position property assigned to it, and even if it did, it should not matter
  -- because the inner-absolute box should just be looking to its ancestor for its position
*/
}

.greyBox {
  display: flex;
  height: 20px;
  width: 50px;
  background-color: grey;
}

<div class="absoluteBox">
  outer yellow box
  <div class="greyBox"></div>
  <div class="absoluteBox">
    inner yellow box should completely fill up screen
  </div>
</div>

我有一个容器（“外容器”）。绝对位置，100％x 100％宽度和高度。它会占用jsFiddle中的整个屏幕。

我把一个孩子放进“外容器”，没有位置相关的属性。（小提琴中的“greyBox”）。

然后我将另一个Absolute 100x100 div放在“Outer-Container”中。称之为“内部容器”。

问题：为什么Inner-Container位置在greyBox之后？它应该忽略兄弟姐妹，从正常的“流动”定位中取出，并在确定其位置时，只看它最近的祖先（外层容器）。

Answer 1

检查出来：https://www.w3.org/TR/css-position-3/#abs-non-replaced-height

删除绒毛，您会看到＆＃34;如果top和bottom 自动且height 不 auto，然后将顶部设置为静态位置，然后求解底部。＆＃34;

这意味着它默认为它的position: static值，这是您所看到的，因为它没有继承或显式引用。布雷特实际上很好地定义了这一点。 position: static值来自最初绘制元素的位置 - 因此考虑前面的子项以计算position: static值，但是前进的子项不是，并且放置好像绝对元素不是＆＃39 ; t存在于DOM流中。

有点乏味，但是有一堆CSS规范规则更没意义（例如影响z-index的不透明度，或者基于百分比的垂直填充相对于它的父元素宽度不是高度......）

Answer 2

top，right，bottom或left属性<{>> NOT 在{{ 1}}元素，元素将根据它在HTML中的位置进行定位。

因此position: absolute元素关心它的兄弟姐妹，因为它将使用前面的兄弟姐妹确定它在布局中的位置。

但position: absolute元素 DOES 会影响后续兄弟姐妹的布局，以及position: absolute元素父级的大小。

position: absolute元素的成功兄弟会忽略它并将自己定位，好像position: absolute元素不存在一样。

position: absolute元素的父级不会为任何position: absolute子级保留空间。因此，即使absolute元素大于它的父元素，父元素也不会增长为包含absolute元素。

＆＃13;

absolute

＆＃13;

.absoluteBox {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 0, 0.5);
  border: 1px solid red;
  box-sizing: border-box;
}

.absoluteBox2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 0, 0.5);
  border: 1px solid red;
  box-sizing: border-box;
}

.greyBox {
  display: flex;
  height: 20px;
  width: 50px;
  background-color: grey;
}

＆＃13;

绝对的位置看起来最亲近的祖先，它关心兄弟姐妹吗？

2 个答案: