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)
blank

相关推荐

  • 零基础入门STM32编程(二)

    零基础入门STM32编程(二)前情回顾上篇文章初步认识了STM32,了解了STM32的分类及型号命名规则,本篇内容继续STM32串口编程入门学习。一走进STM321.1STM32系列STM32单片机分为四类五种,四类介绍参见上一篇文章,本文仅阐述五个系列,分别为:STM32F0系列是针对8位和16位微控制器的32位MCU替代产品,对于工程人员来说非常有吸引力,他们希望其产品平台不会过时,并可围绕工业标准ArmCortex-M0内核进行标准化开发。 STM32G0系列是基于ArmCortex-M0+核心的新..

  • LVS DR负载均衡配置

    LVS DR负载均衡配置

  • vue.js中集成ueditor?

    vue.js中集成ueditor?

    2021年10月11日
  • 用proxy实现一个更优雅的vue

    用proxy实现一个更优雅的vue

  • Celer cBridge 主网上线:无缝桥接跨链和跨层流动性

    Celer cBridge 主网上线:无缝桥接跨链和跨层流动性CelercBridgev1.0版本今天正式主网上线!用户可以立即使用cBridge在Ethereum、Arbitrum、BinanceSmartChain以及Polygon进行高速低成本跨链和跨层转账。cBridge将会在短期内支持更多的layer2和layer1区块链的跨链转账。此外,任何人都将能够通过运行cBridge节点加入cBridge网络以提供跨链跨层流动性,同时通过收取手续费产生收益。cBridge是一个重要的里程碑,它标志着Celer将在未来的多链多层区块链扩容生态下,提..

  • WPF教程2013新版「建议收藏」

    视频目录:(一)WPF基础:控件模型、XAML基础、基础控件【.Net培训—第三季WPF教程】001-课程说明【.Net培训—第三季WPF教程】002-VisualStudio下WPF开发环境的基本使用.zip【.Net培训—第三季WPF教程】003-sender是什么.zip【.Net培训—第三季WPF教程】004-复习继承和类型转换.zip【.Net培训—第三季WPF教程】005-集…

发表回复

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

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