css – 绝对和相对内容的显示方式不同

2019年8月6日 224次阅读

我的问题是：

如果我处于相对和绝对定位应该具有相同结果的情况(例如,如果我将这个位置应用于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>

如果您在浏览器中查看此页面,并用relative替换绝对值,您将看到当列表的容器是绝对/相对时,列表的位置不同.这在Firefox和Chrome上都是如此.

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

最佳答案 这是因为定位的元素绝对不会折叠边距,而相对位置的元素则会折叠. ul元素通常具有由浏览器自动应用的边距和填充.当相对定位时,该边缘折叠到身体边缘中,这就是为什么在列表上方和下方看起来较少“填充”的原因.

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

要阻止这种情况发生,请添加保证金：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>
点赞