CSS - 绝对位置受兄弟的边距影响

Question

我有一个元素是absolute，相对于父元素。但是，该位置受到具有垂直边距的兄弟元素的影响。为什么绝对定位元素尽管具有属性top 等于零，但从与具有垂直边距的兄弟元素相同的位置开始。

请看这个Codepen。

在上面的 codepen 中，元素 div.b 是绝对定位的，但是它受到同级元素 div.a 的影响。元素 div.a 应用了垂直边距。

<div class="parent">
    <div class="a">
        <div class="childA"></div>
        <div class="childA"></div>
        <div class="childA"></div>
        <div class="childA"></div>
    </div>
    <div class="b"></div>
</div>

CSS：

body {
    padding: 0;
    margin: 0;
}

.parent {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: blue;
}

.a {
    margin: 50px;
}

.childA {
    width: 30px;
    height: 30px;
}

.b {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    top: 0;
} 

Answer 1

这有点棘手，但是当一个元素没有任何填充时，其子元素的边距能够溢出到容器的内容之外。这称为collapsing margins，无论您是否使用position: (relative|absolute)，都会发生这种情况。

.block {
  height: 50px;
  background: #ccc;
}

.parent {
  background: #900;
}

.child {
  margin: 40px 0;
  background: #600;
  color: #fff;
  padding: 20px;
}

<div class="block"></div>
<div class="parent">
  <div class="child">Child</div>
</div>
<div class="block"></div>

请注意.parent 没有边距或填充，但.child 和.block 元素之间存在间隙。

通常，当这种行为不受欢迎时，填充比边距更适合您，这也允许您的背景填充继续到间距的边缘。

Answer 2

因为，正如您在问题中所说，它是相对于其父级定位的。 relative 定位元素为其子元素创建新的堆叠上下文。要么将.b 移出其父级，要么将position" relative; 从父级中移除

body {
    padding: 0;
    margin: 0;
}

.parent {
    width: 100%;
    height: 100%;
    background-color: blue;
}

.a {
    margin: 50px;
}

.childA {
    width: 30px;
    height: 30px;
}

.b {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    top: 0;
} 

<div class="parent">
    <div class="a">
        <div class="childA"></div>
        <div class="childA"></div>
        <div class="childA"></div>
        <div class="childA"></div>
    </div>
    <div class="b"></div>
</div>