子元素z-index高于父元素兄弟元素z-index被遮挡问题

问题：最近在写样式时，遇到一个这样的问题，子元素的z-index值大于父元素兄弟元素z-index值，结果子元素超出父元素部分被父元素兄弟元素遮挡
解决：将父元素的z-index值设置为大于兄弟元素z-index值即可
代码如下：
<style>
      .wrapper:first-of-type .outer:first-of-type {
          z-index: 12;
      }
      .outer {
          position: relative;
          width: 300px;
          height: 200px;
          border: 1px solid #999;
          background: #f00;
          z-index: 10;
      }
      .inside {
          position: absolute;
          left: 0;
          top: 0;
          width: 300px;
          height: 300px;
          background: #0f0;
          z-index: 20;
      }
</style>

<body>
    <div class="wrapper">
        <div class="outer">
            <div class="inside">内部元素</div>
        </div>
        <div class="outer"></div>
    </div>
    <div class="wrapper">
        <div class="outer">
            <div class="inside">内部元素</div>
        </div>
        <div class="outer"></div>
    </div>
</body>