为什么不显示这个内联框--css定位和堆栈级别/顺序

Question

我正在阅读w3c.org Visual Formatting specification。

有人可以向我解释为什么内联框“外部”没有显示在我的example here中吗？我试图了解绝对和相对定位。由于<p>标记上没有定位，我认为通过在<div>上设置定位值，<span id="outer">绝对会将自己定位到div。但那并没有发生。如果我从position:relative中移除<div>，则会显示<span id="outer">。我尝试在z-index上设置<p>以更改其堆叠顺序并使其高于<div>，但这也不起作用。根据我的理解，如果一个元素是position:absolute，它将遍历第一个“定位”元素的DOM并使用该“父”元素定位自己。如果没有找到定位，它将自己定位到其包含元素。这似乎没有发生，因为当没有定位时它的包含元素是<p id=inline>，而<div id="container">有position:relative。我希望我能解释这一点。

Answer 1

它正确显示，但它仍然受制于包含div的边框。你已将div设置为“overflow：hidden”，而#outer span的绝对位置使其落在div的边界之外，因此它实际上是不可见的。

如果您取消“溢出：隐藏”，您会看到该框立即显示。