在 Chrome 中不起作用的相对父级上叠加一个固定元素

Question

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

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

<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

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

9.6.1 固定定位

固定定位是绝对定位的一个子类别。唯一的区别是，对于固定定位的框，包含块由视口建立。

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

Answer 2

解决了我自己的问题，

它是由不喜欢动画的chrome错误引起的，特别是-webkit-animation-timeing导致了这个问题。如果其他人遇到此检查，以了解 DOM 中包含动画或转换的任何内容。