z-index

Web布局:CSS定位和层叠控制

在这一章节中我和大家将一起来探讨CSS中的另一个知识重点,即CSS的定位(position)和层叠控制(z-index。这两个属性都隶属于CSS Positioned Layout Module Level 3模块。当人们在接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来易于掌握。使用定位来布局,表面上你确切的指定了一个元素所处的位置,它坐落在那里。可事实上,定位要比你看到要稍微复杂一点。对于很多CSS的新手,CSS定位和层叠控制还是有些东西会被绊倒,所以在它们成为你惯用技巧前你需要先掌握它们。

聊聊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。

返回顶部