CSS深入浅出（4）-层叠上下文和层叠顺序

层叠顺序

顺序

1. 先创建一个div背景
   添加一个border，这时候看看谁离用户更近一点。

   
   image.png
   

   更改背景颜色，发现

   
   image.png
   得出结论 border比background更靠近用户

添加文字，并且缩进，发现文字比border更靠近用户

image.png

然后在比较一下div块级元素,并且设置margin-top:-20px;

image.png
从这发现内联元素比块级元素更靠近用户

下面看看浮动元素，设置浮动之后，在将内联元素缩进，发现

image.png

所以内联元素>浮动和块级元素，但是怎么看块级和浮动呢
将之前注释的注销，看看

image.png
发现浮动比块级更靠近用户

现在看一下儿子元素里面的内联元素和内联元素的比较关系

image.png

发现白色的覆盖红色的字体
从这总结到一点：后来居上

换一个角度看看浮动元素里面的

image.png

内联元素中红色的方块比浮动的黑色方块更靠近用户

下面看看position:relative

image.png
并且向上移动一下，它覆盖了粉色的框，在对比一下和浮动的蓝色框
image.png
会不会是这个position在最下面影响了呢，把蓝色框的浮动放在最下面试试看
image.png

将蓝色框放在最下面之后，在向上移动，仍然是被黄色宽覆盖，说明position比他们更靠近用户。

不明白的话就看看这个博客，深入理解CSS中的层叠上下文和层叠顺序
下面就是z-index了

重点 z-index只对定位元素有效
比如上图中粉色的和蓝色的都是在黄色框下面，现在添加z-index

image.png
最后的效果如下，没用

那么什么是定位元素？position属性

image.png
黄色被灰色的覆盖，但是加上了z-index之后
image.png
黄色的覆盖灰色的。
那么z-index后面跟的值越大 那么和用户就越近
例子

堆叠上下文

MDN

• 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.