css - 绝对和相对内容显示不同

Question

我的问题是:如果我处于 relative 和 absolute 定位应该有相同结果的情况下(例如，如果我在 div 上应用这个位置元素，它是页面中唯一的元素)，并且我为我的元素设置了特定的宽度，为什么 div 内容显示不同，有没有办法解决这个问题。

一个简单的例子应该有助于理解:

使用position: relative;:

.test-border {
  width: 800px;
  position: relative;
  border-left: 3px solid #DFDFDF;
}

<div class="test-border">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>

使用position: absolute;:

.test-border {
  width: 800px;
  position: absolute;
  border-left: 3px solid #DFDFDF;
}

<div class="test-border">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>

如果您在浏览器中查看此页面，并将绝对替换为相对，您将看到当容器为 absolute/relative 时，列表的定位方式不同>。这在 Firefox 和 Chrome 上是正确的。

对我来说，relative/absolute 值的定义并不能解释这种行为，所以如果有人能解释它，它会帮助我 ;-) ...同样重要的是，是否有任何解决方法可以使两者获得相同的结果？

Answer 1

这是因为绝对定位的元素不会折叠边距，而相对定位的元素会折叠边距。 ul 元素通常有 margin 和 padding 由浏览器自动应用。当相对定位时，此 margin 会折叠到 body margin 中，这就是为什么列表上方和下方的“填充”看起来较少的原因。

来自 http://www.w3.org/TR/CSS21/visuren.html#choose-position :

Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

要阻止这种情况发生，请将 margin: 0; 添加到 ul:

.test-border {
  width: 800px;
  position: absolute;
  border-left: 3px solid #DFDFDF;
}
.test-border ul {
  margin: 0;
}

<div class="test-border">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>