原 荐 CSS3 transform 引起z

作者:汪娇娇

时间:2017年9月5日

单纯的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:preserve-3d 或者在transform中显示的设置perspective() 。

@注:transform会创建更高层级的stacking context(堆叠上下文),所以z-index会失效。能同样创建stacking context的还有opacity属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

20种常用的 Ps技术

一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度。 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里...

1801
来自专栏大数据挖掘DT机器学习

信息图制作教程案例

当大家看到很多好看的信息图的时候最喜欢问的两个问题是:用什么软件做的?怎么做的? 在工具选择上,使用Adobe Illustrator,制作过程大家...

4047
来自专栏AzMark

Matplotlib 系列之「绘制函数图像」

matplotlib 是 python 最著名的绘图库,它提供了一整套和 matlab 相似的命令 API,十分适合交互式进行绘图。

1302
来自专栏有趣的django

3.python词云图的生成

2643
来自专栏进步博客

[老法新用]使用padding-top:(percentage)实现响应式背景图片

处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的  <img> 元素,其高度会随着宽度的变化自动调整,且其宽高比不变。如果想在背...

1303
来自专栏我的博客

关于制作手机网页笔记

1、px和rem换算 em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便 rem 的出现就可以避免这类计算的问题,再也不用担心父级元素的...

3648
来自专栏算法channel

Python-GUI|Label显示图片,Pack布局控件

01 Label显示图片 Label显示文本很简单,直接在构造中将text显示地赋值。 如果Label显示成图片,如何设置? PhotoImage构造出图片,...

5536
来自专栏我和PYTHON有个约会

ionic中的$inoicModal

在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】

822
来自专栏前端黑板报

纯CSS实现宽高相等(或者其他比例)

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。 基础结构与样式: 1 2<div class="box"> </div> ...

3717
来自专栏WindCoder

Ps中懵懂斋老师的抽线方法

首先,打开要抽线的图片(Ctrl+O),复制图层(Ctrl+J)。抽线效果一般不需要保留色彩。使用图像>调整>去色(Shift+Ctrl+U),然后再复制一个图...

1461

扫码关注云+社区

领取腾讯云代金券