CSS3transform引起z-index失效
单纯的z-index,可以通过设置数值的⼤⼩来决定层级的⾼低,但⼀涉及transform,z-index就失效了,为什么咩?
那是因为,web中的任何元素都存在于⼀个三维空间中,除了⼤家熟知的平⾯画布中的x轴和y轴之外,还有控制第三维度的z轴。
在CSS中使⽤margin、float、offset这些属性,可以控制元素在x轴和y轴上的表现。⽽z轴上的表现形式可以通过z-index和transform来控制。那它俩是怎么控制z轴的呢?
z-index控制z轴,需要配合position属性,且position的属性值为relative、absolute、fixed和sticky时。并且给z-index显式的设置数值,数值越⼤,其层级越⾼。简单点说,数值越⾼,元素越在顶上。
transform可以通过它的translateZ() 来改变元素的层叠顺序,其值越⼤,越在顶层,离屏幕越近。不过通过transform:translateZ() 改变元素z 轴的层级,必须在元素的⽗元素中显⽰的设置transform-style:preserver-3d 或者在transform中显⽰的设置perspective() 。
css中的position属性@注:transform会创建更⾼层级的stacking context(堆叠上下⽂),所以z-index会失效。能同样创建stacking context的还有opacity属性。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论