Question

请看以下

<div class="container">
  <div class="content">
    <div class="space">
    </div>  
    <div class="item">
      DIV1
    </div>
  </div>
</div>

CSS：

.container {
  position:relative;
  height: 100%;
  width:100%;
}
.content {
  height:100%;
  border:1px solid red;
}
.space {
  margin-top:80px;
 border:1px solid blue;
}

.item {
  position: absolute;
  top:80px;
  left:50px;
  font-size:20px;
  font-weight:bold;
  color: #999999;
  text-align: center;
}

唯一的区别是内容类中的border语句，但输出不同。

你能解释一下发生了什么吗？

Answer 1

这是margin collapsing。边框（如果存在）可防止.space的上边距折叠。没有边界，它会与所有祖先的上边缘一起折叠，包括body（.item的位置'基础'），导致它们向下移动80px。

Answer 2

.item相对于top DIV，80px的{{1}}位置为绝对位置。具有位置为绝对值的元素将通过引用其父级（其位置定义为.cointainer或BODY元素）来定位自身。在您的情况下，最顶层的父元素relative具有.container，因此对于元素positon: relative .item，将从top: 80px开始计算，因为.container定位为绝对定位，它只包含其父.item或body元素，所以在你的情况下它是最顶层的元素position: relative

内容中有边框的奇怪行为

2 个答案: