z-index

聊聊CSS中的层叠相关概念

最近在纠结程序语言和设计语言中的一些概念,整到层叠上下文和图层相关的事情,然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。如果想要理解清楚CSS中的层叠相关的知识点,我们就很有必要先了解一些重要的概念:文档流(Normal Flow)格式化上下文(Formatting Context)层叠上下文(Stacking Context)层叠水平(Stacking Level)层叠顺序(Stacking Order)

z-index和transform

z-indextransform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上。事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读。因为阅读完了,你会有所收获的。

z-index的工作原理

可能并不是那么显而易见,但是HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x轴和y轴,还有控制第三维度的z轴。

没人告诉你关于z-index的一些事

关于z-index的问题是很多程序员都不知道它是如何起作用的。说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果。你不信?那就一起来看看下面的问题。

Sass管理复杂的z-index

z-index本身就是一个棘手的事情,在一个复杂的布局中管理z-index的顺序(层级)更是困难。不同的层叠顺序和内容,要跟踪他们的数字增加是很难的事情——而且他们来自CSS文件,忘了他吧!因为z-index可以造就一个UI元素可见或不可见,使您的网站的用户界面工作秩序是很微妙的。

你对Position的了解程度有多少?

一篇关于 position 定位和 z-index 的基础文章,阐述了 position 定位和 z-index 之间的关联,非常值得新人阅读,老鸟也不妨回顾一下。文中还提到了 z-index 在IE 6 7下的一个BUG。

返回顶部