Sass管理复杂的z-index
z-index
本身就是一个棘手的事情,在一个复杂的布局中管理z-index
的顺序(层级)更是困难。不同的层叠顺序和内容,要跟踪他们的数字增加是很难的事情——而且他们来自CSS文件,忘了他吧!因为z-index
可以造就一个UI元素可见或不可见,使您的网站的用户界面工作秩序是很微妙的。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
z-index
本身就是一个棘手的事情,在一个复杂的布局中管理z-index
的顺序(层级)更是困难。不同的层叠顺序和内容,要跟踪他们的数字增加是很难的事情——而且他们来自CSS文件,忘了他吧!因为z-index
可以造就一个UI元素可见或不可见,使您的网站的用户界面工作秩序是很微妙的。
关于z-index
的问题是很多程序员都不知道它是如何起作用的。说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果。你不信?那就一起来看看下面的问题。
可能并不是那么显而易见,但是HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x
轴和y
轴,还有控制第三维度的z
轴。
z-index
和transform
是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上。事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读。因为阅读完了,你会有所收获的。
最近在纠结程序语言和设计语言中的一些概念,整到层叠上下文和图层相关的事情,然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。如果想要理解清楚CSS中的层叠相关的知识点,我们就很有必要先了解一些重要的概念:文档流(Normal Flow)、格式化上下文(Formatting Context)、层叠上下文(Stacking Context)、层叠水平(Stacking Level) 和 层叠顺序(Stacking Order)。
在这一章节中我和大家将一起来探讨CSS中的另一个知识重点,即CSS的定位(position
)和层叠控制(z-index
)。这两个属性都隶属于**CSS Positioned Layout Module Level 3**模块。当人们在接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来易于掌握。使用定位来布局,表面上你确切的指定了一个元素所处的位置,它坐落在那里。可事实上,定位要比你看到要稍微复杂一点。对于很多CSS的新手,CSS定位和层叠控制还是有些东西会被绊倒,所以在它们成为你惯用技巧前你需要先掌握它们。