Question

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

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

使用position: relative;：

＆＃13;

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

＆＃13;

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

＆＃13;

使用position: absolute;：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您在浏览器中查看此页面，并使用relative替换绝对值，则当列表的容器为absolute / relative时，您会看到该列表的位置不同。这在Firefox和Chrome上都是如此。

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

Answer 1

相对放置的元素仍然与它的父级相关。让它继承其中的一些风格。

绝对放置的元素位于文档流的上方。它与父母的关系无关。

当您停用正文和HTML代码的margin和padding时，您会发现差异已消失：http://jsfiddle.net/oc0n3vmL/

绝对＆amp;相对内容的显示方式不同

1 个答案: