Opacité et contexte d'empilement ++

Dessinez le résultat

html

CSS

<section>

        <div class="A">

            <p>AAAAAA</p>

        </div>


        <div class="B">

            <p class="alert">BBBBBB</p>

        </div>


        <div class="C">

            <p>CCCCCC</p>

        </div>

</section>


p.alert {

  background: blue;

  z-index: 1000;

  position: relative;

}


section {

  position: relative;

}


section > div:nth-child(1) {

  width: 10vw;

  height: 40vh;

  background-color: brown;

}


section > div:nth-child(2) {

  position: absolute;

  width: 20vw;

  height: 20vh;

  background: red;

  opacity: 0.9;

}


section > div:nth-child(3) {

  width: 50vw;

  height: 50vh;

  z-index: 2;

  text-align: right;

  position: relative;

  background: greenyellow;

}


div {

  position: relative;

}


p {

  margin: 0;

}



 

Z-index de P = 1.1000

Que devient le code sans opacity !

Z-index de p : 1000


L'opacité (comme position relative) crée un contexte d'empilement.