2018-03-22 CSS堆叠上下文

堆叠顺序
问题：border和background是什么关系

image.png

A：他们是平齐的
B：border更垂直靠近用户
C：background更垂直靠近用户
给border的颜色加个半透明，结论为B

image.png

如果div里有文字，那文字和border是什么关系？
做个试验，让文字移动（text-indent:-28px）与border有重合，去kankan

image.png

说明文字比border更靠近用户（垂直屏幕）
如果div里既有文字，还有一个子div，那么这文字和一起的div是什么关系？

image.png

发现文字在div上面
那如果div里有文字B，和上面的文字什么关系？

image.png

文字B会盖住前面的文字，后面的盖住前面的
同一个div里的浮动元素和文字什么关系？

image.png

让文字移动下

image.png

文字比浮动元素更靠近用户
浮动元素和同级的div（都是某一个div的子）什么关系？
浮动元素更靠近用户

image.png

浮动元素如果有文字，那么它其实是没有外面的文字更靠近用户的

image.png

同级比较，那么就是谁后就盖住谁

相对定位的relative比浮动元素更靠近用户

image.png

z-index只能给定位元素加，给其他元素加没有作用

image.png

image.png

对于绝对定位呢？

image.png

如果最外面的parent定位了呢（之前没定位）

image.png

这个z-index为-1的尽然跑上来了
会跳到border和块级元素之间

搜the stacking context 堆叠上下文

可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。

根元素 (HTML),
z-index 值不为 "auto"的 绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
-webkit-overflow-scrolling 属性被设置 "touch"的元素

image.png

a1和 b1的都是块级元素，他们的堆叠上下文是html元素（relative的z-index是auto，所以不是堆叠上下文）

如果给a写个z-index为1，那么其就是堆叠上下文了，

image.png

image.png

b在后面，b比a高

这个时候b1（z-index是0）盖住了a1（z-index是2）
因为父级b比a高点，那么b里的所有就比a里的所有高