CSS层级关系 学习笔记
CSS 文档流
|
|
格式化上下文
|
Formatting Context
即初始元素定义的环境
|
块格式化上下文
|
Block Formatting Context
BFC
|
行内格式化上下文
|
Inline Formatting Context
|
让元素脱离文档流的办法
|
float 其它元素对它围绕无视
postion:absolute 其它元素对它完全无视
|
创建块格式化上下文的方法
|
根元素或包含根元素的元素
|
三维空间
|
如果所有元素都在文档流中,那么后面的元素会在上面
|
position属性定位元素
|
除了默认的static值外的元素就是定位元素
|
|
每个元素都属于一个层叠上下文
|
|
层叠上下文中具有相同堆栈级别的框根据文档树出现的顺序层叠在一起???
不懂
|
层叠水平
|
Stacking Level
所有元素都有层叠水平 相当于职级
然后,对于普通元素的层叠水平,我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢?因为否则没有意义
这句什么意思
普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。
注意 层叠水平 不是 z-index
|
层叠顺序
|
|
|
|
|
|
|
z-index属性只适用于定位元素。所以,即使为元素提供z-index的值将其置于其他元素之前,z-index也不会对元素产生影响,除非它被定位;也就是说,除非它具有除static之外的position值。
|
|
如果你想要更改定位元素在z轴上的渲染顺序,可以使用z-index属性。例如,你有两个绝对定位的元素,它们在某个点上重叠,并且你希望其中一个元素显示在另一个元素的前面,即使它在源代码中出现在它之前,你也可以使用z-index属性来实现这一点
没看懂
|
|
|
|
获取除默认值auto之外的z-index值的元素实际上为其所有定位的后代元素创建层叠上下文。我们之前提到过,每个层叠上下文都有一个根元素,它包含其中的所有元素。当你将z-index属性应用于这个元素时,它将在其包含的下下文中指定元素的z轴顺序,并且还将创建以该元素为根的新层叠顺序上下文
好像理解了一半
|
|
每个堆叠塔代表一堆积木的堆叠环境
|
|
|