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 索引