stacking context ex5

by Boyanliuu

HTML

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>stacking context</title>

</head>

<body>

 <div class="box">
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>
  </div>

</body>

</html>

CSS

* {
     margin: 0;
     padding: 0;
}
  .box {
    display: flex;
  }
  .parent {
    width: 200px;
    height: 100px;
    background: #168bf5;
    /* 虽然设置了z-index，但是没有设置position，z-index无效，.parent还是普通元素，没有产生层叠上下文 */
    z-index: 1;
  }
  .child {
    width: 100px;
    height: 200px;
    background: #32d19c;
    position: relative;
    z-index: -1;
  }