css层叠上下文和层叠顺序
普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。
诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。
什么是层叠顺序
border
/background
一般为装饰属性,而浮动和块状元素一般用作布局,而内联元素都是内容。网页中最重要的是什么?当然是内容了哈,对不对!
因此,一定要让内容的层叠顺序相当高,当发生层叠是很好,重要的文字啊图片内容可以优先暴露在屏幕上
- 位于最低水平的
border
/background
指的是层叠上下文元素的边框和背景色。每一个层叠顺序规则适用于一个完整的层叠上下文元素。 - 原图没有呈现inline-block的层叠顺序,实际上,inline-block和inline水平元素是同等level级别。
- z-index:0实际上和z-index:auto单纯从层叠水平上看,是可以看成是一样的。注意这里的措辞——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有着根本性的差异。
③. CSS3与新时代的层叠上下文
CSS3的出现除了带来了新属性,同时还对过去的很多规则发出了挑战。例如,CSS3transform
对overflow隐藏对position:fixed定位的影响等。而这里,层叠上下文这一块的影响要更加广泛与显著。如下:
z-index
值不为auto
的flex
项(父元素display:flex|inline-flex
).- 元素的
opacity
值不是1
. - 元素的
transform
值不是none
. - 元素
mix-blend-mode
值不是normal
. - 元素的
filter
值不是none
. - 元素的
isolation
值是isolate
. will-change
指定的属性值为上面任意一个。- 元素的
-webkit-overflow-scrolling
设为touch
.
摘取自:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
css层叠上下文和层叠顺序的更多相关文章
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- 关于css的层叠上下文和层叠顺序问题
关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- CSS中的层叠上下文和层叠顺序
一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...
- css 层叠上下文和层叠顺序
层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中 哪些元素拥有层叠上下文 1.根元素,也就是html默认拥有 ...
- css之层叠上下文和层叠顺序
大家在写网页的时候会不会经常遇到莫名奇妙的样式问题,比如谁覆盖了谁.也找不出原因,为什么z-index高的却没有覆盖掉z-index低的元素呢? 带着这些疑问.我做了个小实验.代码如下: <st ...
- 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...
随机推荐
- Mysql的常见几种错误:1045,1044
Mysql的常见几种错误: 一.在进入 mysql 数据库时出错 # mysql -u root -p Enter password: ERROR 1045 (28000): Access den ...
- centos下wget时提示unable to resolve host address ...
网络正常的情况,可以查看/etc/resolv.conf [root@localhost ~]# more /etc/resolv.conf # Generated by NetworkManager ...
- 给你两个字符串str1,str2,找出str2在str1中的位置
如题 题目参考链接: http://blog.csdn.net/hxz_qlh/article/details/14110221 代码来自非原创 #include <iostream> # ...
- python学习之-- 事件驱动模型
目前主流的网络驱动模型:事件驱动模型 事件驱动模型:也属于生产者/消费者结构,通过一个队列,保存生产者触发的事件,队列另一头是一个循环从队列里不断的提取事件.大致流程如下:1:首先生成一个事件消息队列 ...
- 牛客网 牛客网暑期ACM多校训练营(第三场)E KMP
链接:https://www.nowcoder.com/acm/contest/141/E 题目描述 Eddy likes to play with string which is a sequenc ...
- [Bzoj1051][HAOI2006]受欢迎的牛(缩环)
1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 6676 Solved: 3502[Submit][Sta ...
- npm Error: Cannot find module 'proto-list'
Error: Cannot find module 'proto-list' at Function.Module._resolveFilename (module.js:338:15) at Fun ...
- 设置eclipse默认用户名
在使用Eclipse自动生成注释时,用户名总会被设置成Windows的登陆用户名.但大多数时候Windows用户名并不是我们写到注释里的用户名. 为了不想一个文件一个文件地修改,可以在最初时就设设置好 ...
- java的反射机制和javassist、asm
1.java的反射机制,可以帮助我们在运行的时候获取我们引用的java类相关的信息,包括类的名字.所包含的方法名字.方法参数等等 2.javassit这个jar包,大概看了下,更厉害,它可以直接操作字 ...
- 如何在Win7 x64上的配置32位的PostgreSQL ODBC数据源
在Win7 x64下安装最新版的PostgreSQL 9.x 后,从其官网下载最新的 ODBC驱动,分为普通的32位和64位版本,正常安装后,从已安装软件列表里可以看到两个版本的驱动都已经正确显示出来 ...