html - 内容中有边框的奇怪行为

Question

请看以下

小提琴 1 小提琴2 HTML：

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

唯一的区别是内容类中的边框声明，但输出不同。

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

Answer 1

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

Answer 2

.itemtop相80px对于.cointainerDIV获得绝对位置。位置为绝对的元素将参考其位置定义为relative或 BODY 元素的父元素定位自身。在您的情况下，最顶层的父元素.container具有，positon: relative因此元素.item top: 80px将从顶部计算，.container并且由于.item定位为绝对，它将仅包含其父元素 withposition: relative或 body 元素，因此在您的情况下，它是最顶层的元素.container