上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

z-index堆叠上下文问题

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2022-5-1 13:18:41 | 显示全部楼层 | 阅读模式

    前言

    今天突然发现z-index有一个非常有意思的特性
    就是z-index不仅仅是会在空间上进行折叠
    还可以通过特定的属性来控制生成自己的空间
    让子元素在其内进行堆叠上下文的排序

    Demo

    首先z-index不为auto
    然后如果大于0的时候时候
    在元素上方
    如果小于0的时候
    在元素下方
    然后我们开始写例子
    我们首先创建三个div
    图片.png
    其中红色和黄色是absolute
    蓝色是红色的子元素
    我们将红色的div不设定z-index
    蓝色的z-index设为9999
    红色设为3,这个时候可以看到蓝色压过了黄色
    这时候是没有触发堆叠上下文的情况
    那我们该如何触发堆叠上下文?
    使用opcaticy,或者对蓝色div设置一个z-index都可以触发
    规则是子元素需要继承某些特定的属性以保证渲染正常
    或当元素是absolute时z-index不为auto时触发堆叠上下文
    除此以外还有其他几种触发方式,但是不常用,有兴趣可以查查

    触发

    那么我们现在使用opcaticy大家可以再看看效果
    我什么也没做
    只对红色加了一个opcaticy为0.99
    图片.png
    这是因为当设置了opcaticy的时候,红色产生了一个自身堆叠上下文
    在这个时候自身的堆叠上下文无论z-index多大
    都不应该影响其他上下文的顺序大小
    顺便一提
    当我们在默认的时候是使用的body的堆叠上下文
    那么堆叠上下文就简单了解到这里了~

    图片.png
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表