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

问题描述：

我有一个简单的绝对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>

答

绝对：

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

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

下面是示例代码：

#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从笔者诺亚斯托克斯文件。

显然这里是诺亚斯托克斯DOCUMENT关于CSS定位

请参阅http://stackoverflow.com/help/referencing以获取有关引用外部源的帮助。 – BoltClock

谢谢先生..供您参考。 – pcs

答

绝对元件位于相对于它的第一定位（未静态）祖先元素

Reference。

在绝对定位模型中，对于其包含的块，明确地将框偏移。它完全从正常流程中删除（它对后面的兄弟姐妹没有影响）。一个绝对的定位框建立一个新的包含块，为正常流程儿童和绝对（但不是固定）定位的后代。但是，绝对定位的元素的内容不会在任何其他框周围流动。他们可能会掩盖另一个框（或被遮挡）的内容，具体取决于重叠框的堆叠层次。

Reference。

答

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

哇，从什么时候??我一直在编程css已经有15年了，从来没有玩过z索引。根据DOM流程显示绝对元素。如果我有两个孩子，第一个是绝对的，第二个孩子是最好的。 –

答

所有的静态元素有其默认的z-index（自动），这意味着，零。

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

答

元件的涂料顺序由CSS 2.1 spec, E.2 Painting order

静态定位的元素确定的是画在步骤4至7，绝对定位为0的z轴折射率元件在步骤8绘，所以总是在顶部。

感谢您回答这个问题。虽然其他答案似乎提供了正确的信息，但我不认为它们与 – Danield

@Danield相关的问题原始问题需要_reason_。这个答案说“只是因为！” –

这是问题的唯一答案。 – Nigiri

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

相关推荐