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

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

去除绒毛，你看到的规格如“如果top和bottom是auto并且height不是auto，那么将顶部设置为静态位置，然后求解底部。”

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

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

Answer 2

如果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>