CSS Opacity属性对层叠上下文的影响

最新推荐文章于 2024-07-16 15:22:31 发布

Greasy_Giant

最新推荐文章于 2024-07-16 15:22:31 发布

阅读量2.6k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/larry011/article/details/50704198

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天在遇到一个opacity过渡的时候，遇到了一个奇怪的问题：
父元素设置了opacity。
子元素设置了z-index:-1

        <div class="box" style="opacity:.7">
            <img style="position:relative;z-index:-1" src="http://www.gbtags.com/gb/laitu/200" />
        </div>

按我之前的理解，图片应该是躲在.box元素后面的，结果，img却安安静静的躺在.box上面…
WTF?

去网上查询了下资料，原来是CSS层叠上下文搞的鬼。。。
当元素的opacity属性不为1的时候，将会创造一个层叠上下文，则无论子元素的z-index为负多少，都将不能穿透父元素。
做个测试

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                opacity: .8;
                padding: 20px;
                background: blueviolet;
            }

            .box:hover
            {
                opacity: 1;
            }

            .box img {
                position: relative;
                z-index: -1;
            }
        </style>
    </head>

    <body>
        <p>opacity在不为1的时候会创建层叠上下文</p>
        <div class="box">
            <img src="http://www.gbtags.com/gb/laitu/200" />
        </div>
    </body>

</html>

鼠标移入时，opacity为1，.box不具有层叠上下文，img穿透.box

除开opacity属性，还有很多CSS属性也会为元素创建层叠上下文

摘自张鑫旭大神的博客

PS:有时候在开发WebAPP页面的时候，会出现一些诡异的布局错乱，有时候可以无脑的设置 transform: translateZ(0);和position:relative，可以解决不少问题。

参考链接

深入理解CSS中的层叠上下文和层叠顺序

Greasy_Giant

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Opacity属性对层叠上下文的影响

今天在遇到一个opacity过渡的时候，遇到了一个奇怪的问题：父元素设置了opacity。子元素设置了z-index:-1 <div class="box" style="opacity:.7"> <img style="position:relative;z-index:-1" src="http://www.gbtags.com/gb/laitu/2
复制链接

扫一扫

专栏目录