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

发布于 2024-12-09 15:16:24 字数 886 浏览 0 评论 0原文

我正在阅读 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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梨涡 2024-12-16 15:16:24

它已正确显示,但仍受包含 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文