将固定元素覆盖在不在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定位都是 relative 到最近的非静态父元素。另一方面，fixed定位相对于窗口/视口。因此，您可以添加position: fixed，以便模式忽略relative元素上的.container定位。

  

9.6.1 Fixed positioning

     

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

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

Answer 2

解决了我自己的问题，

这是由一个不喜欢动画的chrome bug引起的，特别是-webkit-animation-timing导致了这个问题。如果其他人在具有动画或变换的DOM中对包含它的任何内容进行此检查。