为什么这个内联框不显示 -- css 定位和堆栈级别/顺序
我正在阅读 w3c.org 视觉格式规范。
谁能向我解释为什么内联框“外部”没有显示在我的示例中?我试图理解绝对定位和相对定位。由于
标签上没有定位,我认为通过在
绝对会将其自身定位到 div
。但这并没有发生。如果我从
中删除 position:relative
,
将显示。我尝试在
上设置
z-index
来更改其堆叠顺序并使其高于
position:absolute
,它将遍历 DOM 寻找第一个“定位”元素,并将其自身定位到该“父”元素。如果没有找到定位,它将把自己定位到它的包含元素。这似乎没有发生,因为当没有定位时,它的包含元素是
,但
position:relative
。我希望我能正确解释这一点。I'm reading through the w3c.org Visual Formatting specification.
Could anyone explain to me why the inline box "outer" is not displaying in my example here? I was trying to understand absolute and relative positioning. Since there was no positioning on the <p>
tag, I thought that by setting the positioning values on <div>
, the <span id="outer">
would absolutely position itself to the div
. But that is not happening. If I remove the position:relative
from the <div>
the <span id="outer">
will display. I tried setting the z-index
on the <p>
to change its stacking order and make it higher than the <div>
, but that didn't work either. From what I'm understanding, if an element is position:absolute
, it will traverse the DOM for the first "positioned" element and position itself with that 'parent' element. And if no positioning is found, it will position itself to its containing element. This doesn't seem to be happening, since its containing element is <p id=inline>
when there's no positioning, yet the <div id="container">
has position:relative
. I hope I'm explaining this right.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
它已正确显示,但仍受包含 div 的边框的影响。您已将该 div 设置为“overflow:hidden”,并且 #outer span 的绝对位置使其落在 div 的边界之外,因此它实际上是不可见的。
如果你取消“溢出:隐藏”,你会看到该框立即出现。
It is being properly displayed, but it's still subject to the borders of the containing div. You've got that div set to "overflow: hidden", and the #outer span's absolute position makes it fall outside the div's borders, so it's effectively invisible.
If you take off the "overflow: hidden", you'll see the box show up instantly.