父子级z-index层级关系

在使用z-index时尽量都加上position定位，有问题的可以评论说一下。

1.无论子元素的z-index设置的多小，子元素一定会 在父元素上面。

<view class="con">
  <view class="one"></view>
</view>

.con{
  background: yellow;
  z-index:999;
  height: 100px;
  width: 100px;
  position: relative;
  .one{
    background: red;
    z-index:1;
    height: 100px;
    width: 100px;
    left: 50px;
    top:30px;
    position: absolute;
  }
 }

2. 先比较父元素的层级，父元素层级大的在上层,在下图中的one元素的层级虽然比son和two元素都大，但是因为其父元素con的层级小于son，所以con和one都在son,two的下面。

<view class="con">
  <view class="one"></view>
</view>
<view class="son">
 <view class="two"></view>
</view>



.con{
  background: yellow;
  z-index:2;
  height: 100px;
  width: 100px;
  position: relative;
  .one{
    background: red;
    z-index:99;
    height: 100px;
    width: 100px;
    left: 50px;
    top:30px;
    position: absolute;
  }
 }

 .son{
   background: pink;
   width: 100px;
   height: 100px;
   z-index:3;
   top:-50px;
   position: relative;
   .two{
     background:blue;
     width: 100px;
     height: 100px;
     z-index: 30;
     position:absolute;
     left: 70px;
   }
 }