作为一个前端从业人员,相信大家对z-index都不陌生,那么在一个平面的世界里,怎么理解z-index这个属性。
在理解z-index的时候,我们首先要清楚,一个页面是怎样构建坐标轴的,以电脑屏左上角为起点,水平方向从左往右为x轴正向,垂直方向从上往下为y轴正向,屏幕从里往外为z轴正向,这样就形成了我们便于理解的三维结构。
对于定位元素,z-index才会起作用;z-index的值默认为 0 ,即都处于html机构层之上,同一布局层【元素嵌套深度】,后面定位元素会压在前面元素之上。
那么我们在开发过程中如何直观的看到这样的布局,那就要用到网页元素3d效果展示,,所幸,firefox为我们提供了这么一个好的插件,方便我们进行观看。
对于新版的firefox,4.7版本后的,打开附加组件工具,搜索 Tilt ,下载安装,重启浏览器,shift+ctrl +L 即可启动3D展示;
4.7之前的版本,打开调试工具,工具栏里找到3D展示,打钩。