html - 将固定元素覆盖在 Chrome 中不工作的亲戚 parent 身上

Question

试图解决一个有趣的 CSS 问题。

我正在尝试呈现一个最终必须位于相对父级(容器)内部的模态。我需要它是一个固定的叠加层，以便它覆盖整个视口(viewport)。下面包含的代码片段是为了简洁起见。

<nav>..</nav>
<div class='container'>
    <article></article>
    <div id="modal"></div>
</div>

不适用于:

position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:(integer higher than highest z-index);

打开 JS 或 CSS 修复，有什么想法吗？

编辑:刚刚意识到这只发生在 Chrome 中。在最新的 Safari 和 FF 中更新并检查，我猜这是 Chrome 的一个错误。使用 Chrome 版本 37.0.2062.94

Answer 1

绝对/相对定位都是相对最近的非静态父元素。另一方面，fixed 定位是相对于窗口/视口(viewport)的。因此，您可以添加 position: fixed 以便模态忽略 .container 元素上的 relative 定位。

9.6.1 Fixed positioning

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

#modal {
  position: fixed;
  top: 0; right: 0;
  bottom: 0; left: 0;
}