关于z-index问题

关于z-inde,这个网址还是对我受益匪浅的，https://www.cnblogs.com/bigboyLin/p/4621335.html

z-index 起作用得有一个前提：

就是和定位一起用，position:absolute,relative,fixed,都是可以的，inherit 继承要看它父级是否有 定位，static：无特殊定位，对象遵循HTML定位规则 ，initial：最初的都是不受影响的。

 

z-index无论设置多高都不起作用情况：

1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。

 

解决办法有三个（任一即可）：

1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。

 

未解决问题：

对于父级有浮动的父级，z-index不起作用该怎么办。

1.父级的浮动不能取消，

2.正常情况下都没有设置 定位，z-index的元素 ，后边的比前边的等级要高，所以现在是前边被后边盖住（问题）

 

 

 

html:

<div class="container clearfix">
    <div class="col-1 col">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
    <div class="col-2 col">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
</div>

 

css:

 

.container {
    width: 1200px;
    margin: 0 auto;
}
.img {
    width: 285px;
    height: 200px;
    background-color: #ccc;
    margin: 15px;
    position: relative;
    z-index: 1;

}

.img:hover {
    transform: scale(1.3, 1.3);
    background: #000;
    z-index: 9999;
    position: relative;

}

.col {
    float: left;
   
}

 常见情况：

1. 制作二级菜单时候，想要父级盖住子级（正常情况后是者盖上前者）。

      解决办法：

        父级子级必须都要加定位，父级不需要设置z-index，只要子级设置小于  0的z-index,(默认是0)。

         原因： z-index是要考虑父级的，如果子级是0，父级是 2000也盖不住，