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

CSS Opacity属性对层叠上下文的影响今天在遇到一个opacity过渡的时候,遇到了一个奇怪的问题:父元素设置了opacity。子元素设置了z-index:-1

大家好,又见面了,我是你们的朋友全栈君。

今天在遇到一个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>

CSS Opacity属性对层叠上下文的影响
按我之前的理解,图片应该是躲在.box元素后面的,结果,img却安安静静的躺在.box上面…
WTF?
CSS Opacity属性对层叠上下文的影响

去网上查询了下资料,原来是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>

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

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


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

摘自张鑫旭大神的博客
CSS Opacity属性对层叠上下文的影响

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

参考链接

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141490.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 编写socket套接字的步骤_windows7任务栏组成部分

    编写socket套接字的步骤_windows7任务栏组成部分详细内容请见书Windows程序设计珍藏版1081页或请见文章:https://www.jianshu.com/p/066d99da7cbd

  • DedeCMS+ucenter+uchome同步登录退出整合教程

    DedeCMS+ucenter+uchome同步登录退出整合教程

  • php setscale,ming_setscale「建议收藏」

    php setscale,ming_setscale「建议收藏」[#1]mabuzzerathotmaildotcom[2002-03-1310:58:56]ming_setscale()setsthescaleoftheoutputSWF.InsidetheSWFfile,coordinatesaremeasuredinTWIPS,ratherthanPIXELS.Thereare20TWIPSin…

    2022年10月20日
  • mysql将yyyy转换_Mysql时间格式转换

    mysql将yyyy转换_Mysql时间格式转换对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6日期和时间类型。这里是一个使用日期函数的例子。下面的查询选择了所有记录,其date_col的值是在最后30天以内:mysql>SELECTsomethingFROMtableWHERETO_DAYS(NOW())-TO_DAYS(date_col)<=30;DAYOFWEEK(date)返回…

  • Redis配置文件详解

    Redis配置文件详解redis是一款开源的、高性能的键-值存储(key-valuestore),和memcached类似,redis常被称作是一款key-value内存存储系统或者内存数据库,同时由于它支持丰富的数据结构,又被称为一种数据结构服务器(datastructureserver)。编译完redis,它的配置文件在源码目录下redis.conf ,将其拷贝到工作目录下即可使用,下面具体解释r

  • 鼠标双击响应的实现「建议收藏」

    鼠标双击响应的实现「建议收藏」今天在实现鼠标双击响应的时候,遇到了一些问题,下面是对我很有帮助的解释:首先对鼠标双击事件原理做一个简单的了解:在Windows平台上,鼠标左键的按下、松开、快速的两次点击会产生WM_LBUTTONDOWN、WM_LBUTTONUP和WM_LBUTTONDBLCLK消息,但是Windows根据什么来区分连续的两次鼠标按键操作,是两次独立的单击,还是一次双击呢?最近在解决一个问题时,通过使用…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号