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

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 中的整个屏幕。

我将一个孩子放入“Outer-Container”，没有与位置相关的属性。 （小提琴中的“greyBox”）。

然后我将另一个 Absolute 100x100 div 放入“外部容器”中。将此称为“内部容器”。

问题：为什么 Inner-Container 将自身定位在 grayBox 之后？它应该忽略兄弟姐妹，脱离正常的定位“流程”，并在确定其位置时只查看其最近定位的祖先（外部容器）。

Answer 1

如果top、right、bottom 或left 属性未在position: absolute 元素上定义，则该元素将被定位根据它在 HTML 中的位置。

所以position: absolute 元素关心它的前面的兄弟，因为它会使用前面的兄弟来确定它在布局中的位置。

但position: absolute 元素确实会影响后续兄弟元素的布局，以及position: absolute 元素父元素的大小。

position: absolute 元素的后续同级元素将忽略它并将自己定位为好像 position: absolute 元素不存在一样。

并且position: absolute 元素的父元素不会为任何absolute 子元素保留空间。所以即使absolute 元素大于它的父元素，父元素也不会增长到包含absolute 元素。

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

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

Answer 2

看看这个：https://www.w3.org/TR/css-position-3/#abs-non-replaced-height

去除绒毛，您会看到“如果 top 和 bottom 是自动且 height 是不是自动，则将顶部设置为静态位置，然后求解底部。”

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

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