Question

我正在创建一个包含几个容器的网站，当点击容器时，弹出窗口应显示并覆盖网站中的所有其他容器（即其他容器和浮动菜单）。

这样的事情： 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索引

Answer 2

从z-index

中删除div.container

div.container {
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
  color: white;
  /* z-index: 1; */
  margin-bottom: 10px;
}

Answer 3

按以下方式替换div.container和div.testing：

div.container {
    position: relative;
    height: 300px;
    width: 300px;
    background-color: green;
    color: white;
    /* z-index: 1; */
    margin-bottom: 10px;
}
div.testing {
    position: absolute;
    display: block;
    top: 40px;
    left: 40px;
    background-color: white;
    color: red;
    z-index: 1;
}

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

3 个答案: