537 同一个堆叠上下文元素排列顺序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>同一个堆叠上下文元素排列顺序</title>
  <style type="text/css">
    .wrapper {
      position: relative;
      z-index: 1;
       450px;
      height: 350px;
      background-color: #ccc;
      border: 2px solid #e6a23c;
    }

    .wrapper > div {
      padding: 0 5px;
       200px;
      height: 100px;
      box-sizing: border-box;
      border: 2px solid red;
    }

    .wrapper div:nth-of-type(1) {
      position: relative;
      z-index: -1;
      background-color: #FEF49C;
    }

    .wrapper div:nth-of-type(2) {
      display: block;
      margin: -50px 0 0 50px;
      background-color: #ADF4FF;
    }

    .wrapper div:nth-of-type(3) {
      float: left;
      margin: -50px 0 0 100px;
      background-color: #B2FBA1;
    }

    .wrapper div:nth-of-type(4) {
      display: inline-block;
      margin-left: -150px;
      background-color: #FFC7C7;
    }

    .wrapper div:nth-of-type(5) {
      position: relative;
      margin: -50px 0 0 200px;
      background-color: #B6CAFF;
    }

    .wrapper div:nth-of-type(6) {
      position: absolute;
      z-index: 1;
      margin: -50px 0 0 250px;
      background-color: #EEEEEE;
    }
  </style>
</head>

<body>
  <!--  在同一个层叠上下文中，子元素按照 层叠顺序 规则进行层叠  -->
  <div class="wrapper">
    <div>position: relative;<br>z-index: -1;</div>
    <div>display: block;</div>
    <div>float: left;</div>
    <div>display: inline-block;</div>
    <div>position: relative;</div>
    <div>position: absolute;<br>z-index: 1;</div>
  </div>
</body>

</html>