javascript - 如何定义一个覆盖另一个 div 内的页面的 div？

Question

我正在制作一个包含几个容器的网站，当单击容器时，应该会出现一个弹出窗口并覆盖网站中的所有其他内容(即其他容器和 float 菜单)。

是这样的:HTML

<div class="container">
  This is the container.
  <div class="inside">
      Some popup content that will be specific to this container, and should cover everything.
  </div>
</div>
<div class="container">
  This is another container.
  <div class="inside">
      Some popup content that will be specific to this container, and should cover everything.
  </div>
</div>
<div class="testing">
  This is a floating menu that will be controlled by javascript later.<br>
  Necessary to be covering the container, but should be cover by the inside div.<br>
  <a href="#">Some fake links</a><br>
  <a href="#">Some fake links</a><br>
  <a href="#">Some fake links</a><br>
  <a href="#">Some fake links</a><br>
  <a href="#">Some fake links</a><br>
</div>

CSS

div.container {
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
  color: white;
  z-index: 1;
  margin-bottom: 10px;
}
div.inside {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 30%;
  background-color: #000;
  opacity: .8;
  z-index: 100;
}
div.testing {
  position: absolute;
  display: block;
  top: 40px;
  left: 40px;
  background-color: white;
  color: red;
  z-index: 10;
}

Javascript(假设已经包含 jquery)

$("div.inside").hide();
$("div.container").click(function(){
    $(this).find("div.inside").show();
})
$("div.inside").click(function(event){
    event.stopPropagation();
    $('div.inside').hide();
})

Here's a jsFiddle to demonstrate the current situation

如您在上面的演示中所见，弹出窗口并未涵盖其他所有内容。由于弹出内容与容器高度相关，所以我希望尽可能将其保留在容器内。 (而且编写 javascript 更容易，因为不需要提供 id。)

有没有办法保持 HTML 结构不变，但只使用 CSS 使弹出窗口覆盖所有其他内容？

Answer 1

在非静态定位元素的情况下，嵌套很重要。如果元素 B 位于元素 A 之上，则元素 A 的子元素永远不会高于元素 B。

更多信息:https://css-tricks.com/almanac/properties/z/z-index/

从除弹出窗口之外的所有内容中删除所有 Z 索引