绝对和相对内容显示不同

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 中，这就是为什么列表上方和下方的 "padding" 看起来较少的原因。

来自 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>

Answer 2

相对于父元素放置的元素仍然与其父元素相关。让它继承它的一些样式。

绝对放置的元素，位于文档流之上。它与 'parent'.

无关

当您禁用正文和 HTML 标签的 margin 和 padding 时，您会发现区别消失了：http://jsfiddle.net/oc0n3vmL/

绝对和相对内容显示不同

Absolute & relative content is displayed differently

css

position