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的出现除了带来了新属性，同时还对过去的很多规则发出了挑战。例如，CSS3 transform对overflow隐藏对position:fixed定位的影响等。而这里，层叠上下文这一块的影响要更加广泛与显著。

如下：
1. z-index值不为auto的flex项(父元素display:flex|inline-flex).
2. 元素的opacity值不是1.
3. 元素的transform值不是none.
4. 元素mix-blend-mode值不是normal.
5. 元素的filter值不是none.
6. 元素的isolation值是isolate.
7. will-change指定的属性值为上面任意一个。
8. 元素的-webkit-overflow-scrolling设为touch.

摘取自：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

转载于:https://www.cnblogs.com/xiaofenguo/p/6295809.html

css层叠上下文和层叠顺序相关推荐

[转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
深入理解CSS中的层叠上下文和层叠顺序
转载一篇张鑫旭大神的文章(对于理解GPU硬件加速和网页分层还是有一点帮助的),原文地址:深入理解CSS中的层叠上下文和层叠顺序零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论 ...
CSS层叠上下文、层叠顺序和层叠等级
0 前言在讨论层叠上下文和层叠顺序之前先举个例子,创建两个box,其中红色box长200px宽400px,蓝色box长400px宽200px: <div class="box&quo ...
CSS基础：CSS的上下文之层叠上下文
CSS的上下文之层叠上下文看到层叠,大家一定会联想到定位元素会是的元素之间发生"遮挡",而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分. 本文 ...
vb6 combo根据index显示_彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
CSS 三大特性（层叠性，继承性，优先级）
CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部 ...
[BUGCASE]层叠上下文和z-index属性使用不当引发的文本被遮挡的问题
一.问题描述在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段一个提示的特效,所以做了一个提示层这个提示层被固定(拖动表格的水平滚动条时固定)的表格列遮住 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
CSS中属性的书写顺序
传说中的Mozilla推荐 /* mozilla.org Base Styles* maintained by fantasai*/ /* Suggested order:* display* lis ...

css层叠上下文和层叠顺序

什么是层叠顺序

css层叠上下文和层叠顺序相关推荐

最新文章

热门文章