关于父元素子元素定位层级的问题

发布于
2019-08-07

父元素和子元素都设置了position:absolute，父元素定位z-index：9999，子元素定位z-index：-9999，为什么子元素还显示在父元素上面

/**父元素**/
 <div class="menudropdown-list animated">
           /**子元素**/
            <i class="unmessage-angel" style="left:110px;"></i>
                 .......
  </div>

/**父元素样式**/
.menudropdown-list{
      /*display: none;*/
      position:absolute;
      top:32px;
      right:30px;
      width:147px;
      height:239px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 8px 0px rgba(221,226,238,1);
      border-radius:5px;
      z-index:99999
}
/**子元素样式**/
.unmessage-angel{
     z-index:-9999999;
     position: absolute;
    width: 25px; /* 25x25的一个元素 */
    height: 25px;
    border-radius:2px;/*突出来的角弧度稍微平滑2个像素*/
    background-color: white;
    box-shadow:2px 2px 8px 0px rgba(221,226,238,1);
    -webkit-transform: rotate(45deg); /* 旋转45度 */
      -moz-transform:    rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
   }