工作中的 Fiddle 示例！
如果您将此问题的范围限制在您提供的代码上，那么它就可以正常工作！例如，在 Fiddle 上，您可以看到我为 position:fixed 的 div 设置了背景颜色，以说明该解决方案正在工作。
但是，如果您使用了 z-index，则可以安全地假设具有 z-index 的元素已经应用了某些 position。
考虑到这一点，下面是这部分内容：
<div style="z-index:902;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
Overlay
</div>
Contents of container 1
</div>
无法作为“整个页面”叠加层，因为具有
position:fixed的内部div位于具有其他堆叠元素（兄弟姐妹）的堆栈元素内，处于相同的堆栈位置上，并且具有
z-index:902;。
请参见此
演示！
如果将兄弟元素移动到较低的堆栈位置，则可以使其正常工作。请参见此
演示示例！
编辑
根据My Head Hurts的建议（请参见评论），本答案的第一部分已进行了编辑，以更好地解释第一个Fiddle之所以有效是因为OP留下了猜测的空间！两个解决方案的内容没有做出任何更改并被认可。
解决方案
是将叠加层放置在所有其他div之外，但这取决于您的目标：
<div style="z-index:902;">
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
<div style="position:fixed; z-index:10000; left:0; top:0; right:0; bottom:0; background:#ccc;">
Overlay
</div>
请看这个
Fiddle示例！
已编辑
因为这个评论：
是的，这将是理想的答案，我会接受它作为回答我的问题，但我遇到的问题来自一些JavaScript，它动态更改了其他容器的z-index，我无法控制，从而使得不可能将我的div放在所有容器的顶部。
假设您可以在container 1中放置任何您希望的内容，并假设您正在使用或可以使用jQuery，则可以执行以下操作以解决问题：
<div style="z-index:902;">
<div class="placeOutside" style="position:fixed; z-index:903; right:0; bottom:0; left:0; top:0; background:#ccc;">
Overlay
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.placeOutside').appendTo('body');
});
</script>
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
查看这个可工作的
Fiddle示例！
z-index: 903!important，那么这个问题就会得到解决。从纯客观的角度来看，如果你指的是第一部分，那么被接受的答案永远不会起作用。 - My Head Hurtsid，只有class- 我受限于使用CMS所能实现的功能。 - colincameron