How to define a div that covers a page inside another div?

Question

I am making a website that contains a few containers, and when the container is clicked, a popup should show up and cover everything else (ie other containers and a floating menu) in the website.

Something like this: 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 (assume jquery included already)

$("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

As you can see in the above demo, the pop-up is not covering everything else. As the pop-up content is highly related to the container, I would like to keep it inside the container as long as it is possible. (And it is easier to write the javascript as no id is needed to be given.)

Is there a way to keep the HTML structure the same but make that pop-up covering everything else using only CSS?

Answer 1

In a case of non-static positioned elements nesting is important. If an element B sits on top of element A, a child element of element A can never be higher than element B.

More here: https://css-tricks.com/almanac/properties/z/z-index/

Remove all the Z-indexes from everything but your popup

Answer 2

Remove the z-index from div.container

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

Answer 3

Replace div.container and div.testing as per following:

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;
}