观澜Media

AI技术 · 深度资讯 · 前沿观察

解开 CSS 堆叠上下文

您是否曾经在 CSS 中的某个元素上设置了 z-i..

您是否曾经在 CSS 中的某个元素上设置了 z-index: 99999,并且它没有出现在其他元素之上。

假设所有不同的元素都设置为较低的值或根本没有设置,那么大的值应该很容易将该元素视觉地放置在其他元素之上。

然而,通过应用特定的 CSS 属性,引入了一个假想的 z 轴平面来传达深度。

该平面垂直于屏幕,用户可以从该平面感知元素的顺序,一个在另一个之上。

假想的 z 轴(用户对堆叠元素的感知)背后的想法是,创建它的 CSS 属性组合在一起形成我们所说的堆叠上下文。

最后放置的纸张相当于最近添加的 HTML 元素,并且它位于之前放置的所有其他纸张之上。

来源:Smashing Magazine

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注