We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.

**HTML:**

```
<div id="body" style="z-index:1;position:relative;">

  <div id="div1" style="z-index:4;position:relative;">
  </div>

  <div style="z-index:4;background-color: red;  width: 70px;position:relative;height: 70px;">
    <div id="div2" style="z-index:7;background-color:green;position:relative;">
    </div>
  </div>

  <div id="back" style="z-index:5;">
  </div>

</div>

```

**CSS:**

```
#body {
  background-color: blue;
  width: 500px;
  height: 500px;
  position: relative;
}

#div1 {
  position:relative;
  background-color: white;
  width: 100px;
  height: 100px;
}

#back {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
}

```

There is a fiddle of our problem :

<https://jsfiddle.net/ruj23c60/3/>