<div class="bfc">  
  Case1: flex child element
  <div class="flex">
    <div class="imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
    </div>
  </div>
</div>

<div class="bfc">  
  Case2: Opacity
  <div class="opacity imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
  </div>
</div>

<div class="bfc">  
  Case3: Transform
  <div class="transform imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
  </div>
</div>

<div class="bfc">  
  Case4: mix-blend-mode
  <div class="mixBlendMode imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
  </div>
</div>

<div class="bfc">  
  Case5: filter
  <div class="filter imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
  </div>
</div>

<div class="bfc">  
  Case6: isolation: isolate<br>
  <img src="https://i.imgur.com/0DS8pKI.png" style="position: absolute; mix-blend-mode: darken;">
  <div class="isolate imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
  </div>
</div>

<div class="bfc">  
  Case7: will-change
  <div class="willChange imgWrapper">
      <img src="https://i.imgur.com/Mql4f5C.png">
  </div>
</div>
/* We can see image above because there is stack context produced*/
div>img{
  position: relative;
  z-index:-1;
}

/* Case1: flex  */
.flex{display: flex;}   

/* Case2: Opacity */
.opacity{opacity: 0.5;} 

/* Case3: Transform */
.transform{
  margin-top: 100px;
  transform-origin: bottom right;
  transform: rotate(30deg);
}

/* Case4: mix blend mode*/
.mixBlendMode{mix-blend-mode: darken;}

/* Case5: filter*/
.filter{filter: blur(3px);}

/* Case6: isolate */
.isolate{isolation: isolate;}

/* Case7: will-change */
.willChange{will-change: transform;}

/* use this class to devide page into serveral partition */
.bfc{
  position:relative;
  border: 1px solid var(--grey1);
}
.imgWrapper{
  width: 220px;
  height: 150px;
  z-index: 1;
  background-color: var(--grey3);
}

body{
  background-color: rgb(30,30,30);
  color: white;
  font-family: verdana;
}

:root{
  --grey1: rgb(60,60,60);
  --grey2: rgb(90,90,90);
  --grey3: rgb(120,120,120);
}
console.log("refresh");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.