stacking_context.html | Explore in Territory

<html>
<head>
  <style>
    * {
      margin: 0px;
    }
    div {
      position: absolute;
      padding-top: 20px;
      border: 1px solid black;
      color: white;
      text-align: center;
    }
    #box1 {
      z-index: 5;
      background-color: rgba(200, 100, 100, 0.9);
      width: 100px;
      height: 400px;
    }
    #box2 {
      z-index: 4;
      background-color: rgba(100, 200, 100, 0.9);
      width: 560px;
      height: 300px;
      top: 50px;
      left: 70px;
    }
    #box3 {
      z-index: 2;
      background-color: rgba(200, 100, 100, 0.9);
      width: 100px;
      height: 400px;
      left: 600px;
    }
    #box4 {
      z-index: 6;
      background-color: rgba(100, 100, 200, 0.9);
      left: 20px;
      width: 100px;
      height: 220px;
      padding-left: 0px;
    }
    #box5 {
      z-index: 1;
      background-color: rgba(100, 100, 200, 0.9);
      left: 440px;
      width: 100px;
      height: 220px;
    }
    #box6 {
      z-index: 3;
      background-color: rgba(100, 200, 200, 0.9);
      left: 80px;
      top: 120px;
      width: 400px;
      height: 100px;
    }
    #box7 {
      z-index: 5;
      top: 500px;
    }
  </style>
  <template id="shadow-template">
    <div id="shadow-div">Hi!</div>
  </template>
</head>
<body>
<div id="box1">Box1</div>
<div id="box2">
  Box2
  <div id="box4">Box4</div>
  <div id="box5">Box5</div>
  <div id="box6">Box6</div>
</div>
<div id="box3">Box3</div>
<div id="box7">
  <iframe src='./iframe.html' width="400" height="200" id="iframe"></iframe>
  <div id="shadow-host"></div>
</div>
</body>
</html>
chromium/third_party/blink/web_tests/inspector-protocol/resources/stacking_context.html
