z-index和transform

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

堆叠上下文(Stacking Context)

在开始今天的主题之前,先得回忆一下CSS中的Stacking Context(堆叠上下文)。因为只有了解清楚了这个概念,才能更好的了解下面的内容。

任何HTML文档默认的堆叠上下文都是<html>元素。因此,除非创建新的堆叠上下文。默认情况下,元素的堆叠顺序相对于页面内的其他元素。在一个未做堆叠顺序更换的页面中,其顺序就是根据HTML中的元素出现的先后顺序来决定,先出现的在底下,后出现的在顶部。用数字来表示的话是就1,2,3,4,...,n这样的顺序。比如下面的示例:

第二个div做了一个margin-top-50px,可以看到第二个div遮住了第一个div。那么怎么才能改变默认的堆叠顺序呢?

先把结论给大家抛出来,在CSS中可以使用z-indextransform可以改变元素的堆叠顺序。但也可能会导致一些奇怪的情况,比如具有较大的z-index的元素并不总是位于具有较低z-index元素的上方。比如,在一些情况之下,同时使用z-indextransform会让z-index失效等。

CSS中会产生新的层情况还有很多种:

  • 当一个元素位于HTML文档的最外层(<html>元素)
  • 当一个元素被定位了并且拥有一个z-index值(不为auto
  • 当一个元素被设置了opacitytransforms, filters, css-regions, paged media等属性
  • flex item,也就是父元素的display设置了flex或者inline-flex值,早期的box值不行
  • grid item,也就是父元素的display设置了grid或者inline-grid
  • isolation:isolate
  • 元素的mix-blend-mode值不为normal
  • 元素的overflow-scrolling值不为touch
  • 元素的filter值不为none
  • 元素的perspective值不为none
  • 元素的motion-path值不为none

三维空间

Web中的任何元素都存在于一个三维空间中,除了大家熟知的平面画布中的x轴和y轴之外,还有控制第三维度的z轴,如下图所示:

三维空间

在CSS中使用margin,floatoffset这些属性,可以控制元素在x轴和y轴上的表现。而z轴上的表现形式可以通过z-indextransform来控制。

如何控制z轴

前面也说了,控制z是通过z-indextransform来实现的。先简单的了解一下这两种控制z轴的方法。

通过z-index控制z轴,需要配合position属性,且position的属性值为relativeabsolutefixedsticky时。并且给z-index显式的设置数值,数值越大,其层级越高。简单点说,数值越高,元素越在顶上。

如何控制z轴

transform可以通过它的translateZ()来改变元素的层叠顺序,其值越大,越在顶层,离屏幕越近。不过通过transform:translateZ()改变元素z轴的层级,必须在元素的父元素中显示的设置transform-style: preserve-3d或者在transform中显示的设置perspective()。如下所示:

如何控制z轴

$list: #f44336
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/3d-transform-and-z-index.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部