Question

我有一个简单的绝对div和另一个正常的div落后。为什么绝对div高于另一个？

我知道我可以用z-index修复它 - 但是原因是什么？

<style>
    .with-absolute {
      position:absolute;
      top:0px;
      bottom:0px;
      background-color:red
    }
    .other {
      background-color:yellow;
    }
  </style>
   </head>
<body>
  <div class="with-absolute">Hello</div>
  <div class="other">Why is this not on top? It comes last</div>
</body>

Answer 1

绝对元素相对于其第一个定位位置（不是静态的）祖先元素

Reference

在绝对定位模型中，显式偏移框尊重其内容。它从正常流程中删除完全（它对后来的兄弟姐妹没有影响）。绝对的定位框为正常流量建立新的包含块儿童和绝对（但不是固定）的后代。但是，绝对定位元素的内容不会流动在任何其他盒子周围。它们可能会遮挡另一个盒子的内容（或者自己模糊），取决于的堆栈级别重叠的盒子。

Reference

Answer 2

元素的绘制顺序由CSS 2.1 spec, E.2 Painting order

决定

静态定位元素在步骤4到7中绘制。在步骤8中绘制z-index为auto或0的绝对定位元素，因此始终位于顶部。

Answer 3

通常，绝对元素的z-index的默认值是0，它位于静态位置之上。如果要将其移动到后面，请将z-index设置为-1。

Answer 4

<强>绝对

这意味着你可以把它放在任何地方，它不会影响或受到流程中任何其他元素的影响。

与静态和相对值不同，绝对定位的元素将从正常流中移除。

以下是示例代码：

#box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO来自作者 Noah Stokes的 文档。

显然， Noah Stokes的 DOCUMENT关于css定位

Answer 5

所有静态元素都有一个默认的z-index（auto），意思是零。

我所拥有的逻辑解释是，当您将position: relative|absolute|fixed添加到元素时，将其放在文档流之外，因此成为1的z索引。

为什么位置绝对呈现在静态位置之上？

5 个答案: