There is a black block that is superimposed on the red block, the black block has a green block that should be behind the red block. How to organize this without editing the html code? https://jsfiddle.net/ooceokLd/1/

.l { border: 1px black solid; z-index: 0; } .q1 { width: 200px; height: 200px; background: red; position: relative; } .q2 { z-index: 1; top: 150px; left: 30px; position: relative; width: 150px; height: 150px; background: black; } p { z-index: -2; width: 50px; height: 50px; position: absolute; background: green; right: -35px; } 
 <div class="l"> <div class="q2"><p></p></div> <div class="q1"></div> </div>

    1 answer 1

     .l { border: 1px black solid; z-index: 0; } .q1{ width: 200px; height: 200px; background: red; position: relative; } .q2 { z-index: 1; top: 150px; left: 30px; position: relative; width: 150px; height: 150px; background: black; } p { z-index: -2; width: 50px; height: 50px; position: absolute; background: green; right: -25px; } p:before { content: ''; position: absolute; right: 5px; width: 20px; height: 100%; background: red; } 
     <div class="l"> <div class="q2"><p></p></div> <div class="q1"></div> </div>