Question

CSS新手在这里试图弄清楚这种情况：

p {
  margin: 0;
}

#container{
  background-color: black;
  color: white;
}

#header {
  background-color: #88b;
}

#green {
  background-color: green;
  position: absolute;
  width: 200px;
  left: 0;
}

#red {
  background-color: red;
  position: absolute;
  width: 200px;
  right: 0;
}

#footer {
  background-color: #88b;
  position: relative;
}

<div id='container'>
  <div id='header'>
    <p> div-header </p>
  </div>
  <div id='green'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
  </div>
    <div id='red'>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
  </div>
  <div id='footer'>
    <p> div-footer </p>
  </div>
</div>

当我从position: relative元素中删除footer时。 green和red都将悬停在footer之上。我在其他地方读到这是因为当你将一个元素设置为position: absolute时，它不会保留在doc的流程中。

我的问题是，为什么将position: relative添加到footer会使其显示在绝对定位元素上方（例如green和red）？

感谢。

Answer 1

来自the spec

堆叠上下文中具有相同堆栈级别的框根据文档树顺序从前到后堆叠。

和

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：


形成堆叠背景的元素的背景和边界。

具有负堆栈级别的子堆叠上下文（大多数   否定第一）。

流入式，非内联级别，非定位后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别0的子堆叠上下文和堆栈级别为0的定位的后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

当你定位页脚时，你将它从第3层撞到第6层，此时它会在其他定位元素的顶部呈现，因为它稍后出现在DOM中。

Answer 2

对“位置：相对”定位有一些误解。第一件事是“相对于自己”，而不是任何其他元素。现在，如果你使用这个属性（position：relative），你必须使用其他一些定位属性，如（top，left，right，bottom）等，否则它根本不会影响它的位置。
第二件事（这是你的情况）是通过使用“相对”定位是它在该元素上使用z-index的能力。因此，即使您没有设置z-index值，此元素现在也将显示在任何其他静态（意味着没有提到特定位置）定位元素的顶部。这种定位发生的另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块中。有关详细信息，您可以谷歌或访问此处 Absolute positioning inside Relative positioning

Answer 3

只需提供#green和#red div：style

即可

z-index: 2; ...

这将解决你的问题

CSS相对位置和绝对位置

3 个答案: