css在相对元素中定位静态元素

Question

我是css的新手 我对“静态”和“相对”的位置有一些疑问。 当“静态”元素置于“相对”元素时，保证金属性如何工作？ 代码如下。

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.top{
  margin-top:20px;
  padding:20px;
 }
  
.back{
  background-color:#eee;
  position:relative;
}

<div class="back">
  <div class="top">Top text </div>
</div>

我的问题是“top”div的边距为20px “后退”div是“相对的”并且没有保证金 但为什么“后退”div的边距与“顶部”div相同？

Answer 1

您所看到的是“保证金崩溃”https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

  

父级和第一个/最后一个孩子 - 如果没有边框，填充，内联内容，block_formatting_context创建或清除以将块的边距顶部与其第一个子节点的边距顶部分开阻止或没有边框，填充，内联内容，高度，最小高度或最大高度将块的边距底部与其最后一个子节点的边距底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。