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

Question

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

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

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

JSBIN:http://jsbin.com/yadoxiwuho/1

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

ode*_*dta 6

absolute元素相对于其第一个定位(非静态)祖先元素定位

参考.

在绝对定位模型中,框相对于其包含块明确偏移.它完全从正常流程中移除(它对后来的兄弟姐妹没有影响).绝对定位的框为正常流动子项和绝对(但不是固定)定位后代建立新的包含块.但是,绝对定位元素的内容不会围绕任何其他框流动.它们可能会遮挡另一个框的内容(或自身被遮挡),具体取决于重叠框的堆栈级别.

参考.

Answer 2

Alo*_*hci 6

元素的绘制顺序由CSS 2.1规范,E.2绘画顺序决定

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

谢谢你真的回答了这个问题.虽然其他答案似乎提供了正确的信息,但我看不出它们与问题的关系 (2认同)
@Danield最初的问题要求_reason_.这个答案说"只是因为!" (2认同)

Answer 3

pcs*_*pcs 2

绝对：

\n\n

这意味着您可以将其放在任何地方，并且它不会影响流中的任何其他元素或受其影响。

\n\n

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

\n\n

这是示例代码：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

演示版来自作者Noah Stokes 文档。

\n\n

显然这是 诺亚·斯托克斯的 关于 css 定位的文档

\n

归档时间：	10 年，6 月前
查看次数：	1417 次
最近记录：	7 年前