为什么父元素设置 float 后子元素 z-index 失效？

我想通过设置.mask-layer:{ position: absolute; z-index: 9;}遮住img，但是父元素.mask-layer-show设置为float后子元素z-index就失效了，是什么问题？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div class="box">
        <div class="mask-layer-show">
            <a href="#"><img src="img/product04.png" alt=""></a>
            <div class="mask-layer">

            </div>
        </div>
        <div class="mask-layer-show">
            <a href="#"><img src="img/product04.png" alt=""></a>
            <div class="mask-layer">
            </div>
        </div>



    </div>
    <style media="screen">
    .box{
        width: 1000px;
        height: 720px;
    }
    .box .mask-layer-show{
        float: left;
        width: 500px;
        height: 360px;
        position: relative;
    }
    .mask-layer{
        //遮罩层
        width: 500px;
        height: 360px;
        border: 1px solid red;
        position: absolute;
        z-index: 9; 
        background-color: #CCCCCC;
    }
    </style>
</body>

</html>

阅读 6.4k

1.代码注释错误
在css中注释代码使用的是 /遮罩层/
2.在.mask-layer中，因为你加了定位position，是元素脱离了文档流，所以要指定它的位置，机left,top

 .mask-layer{
        /*    遮罩层*/
        width: 500px;
        height: 360px;
        border: 1px solid red;
        position: absolute;
        left:0;
        top:0;
        z-index: 9; 
        background-color: #CCCCCC;
    }

3.遮罩不建议用纯色，建议用rgba
4.展示效果

5.附代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box{
            width: 1000px;
            height: 720px;
            margin: 0 auto;
        }
         .box .mask-layer-show{
            float: left;
            width: 500px;
            height: 360px;
            position: relative;
            z-index: 1;
        }
        .box .mask-layer-show a{
            display: block;
            width: 500px;
            height: 360px;
            overflow: hidden;
        }
        .mask-layer{
            /* 遮罩层*/
            width: 500px;
            height: 360px;
            border: 1px solid red;
            position: absolute;
            left:0;
            top:0;
            z-index: 9; 
            background:rgba(0,0,0,.5);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="mask-layer-show">
            <a href="#"><img src="img/1.png" alt=""></a>
            <div class="mask-layer">
    
            </div>
        </div>
        <div class="mask-layer-show">
               <a href="#"><img src="img/1.png" alt=""></a>
            <div class="mask-layer">
                
            </div>
        </div>
    </div>
</body>
</html>

6.预览：https://ityanxi.github.io/seg...

为什么父元素设置 float 后子元素 z-index 失效？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？