css-exclusions-1/examples/ordered-exclusion.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <style>
    .exclusion  {
      -ms-wrap-flow: both; 
      position: absolute; 
      width: 200px; 
      height: auto; 
    }
    .topleft {
      top: 10px;
      left: 10px;
      background-color: lightblue;
    }
    .middle {
      top: 90px;
      left: 90px;
      background-color: lightgreen;
    }
    .bottomright {
      top: 170px;
      left: 170px;
      background-color: pink;
    }
    .middle {
      --z-index: 1;
    }
  </style> 
</head>
<body lang="en">
  <div class="exclusion topleft"> 
    The top left div is first in painting order because it's the first in document order, so it will be affected by both of the following exclusions in both cases. To repeat, the top left div is first in painting order because it's the first in document order, so it will be affected by both of the following exclusions in both cases. 
  </div> 
  <div class="exclusion middle"> 
    The middle div would normally be in the middle in painting order, so it would only be affected by the last exclusion. But if we change it's z-index to paint last, then its exclusion applies first. 
  </div> 
  <div class="exclusion bottomright"> 
    The bottom right div would normally not be affected by either of the previous divs, but when the middle div is changed to paint after the bottom right div, then the bottom right div becomes affected by the middle exclusion.
  </div>
</body>
</html>