前两天在xx上看到一篇文章：这个场景有点眼熟。。。总之就是这些言论。。。。。一下子勾起了我的创作欲望，所以这位美女为大家准备了一份z-index的正确使用指南。拿起笔和纸，做一些笔记！！常见问题emmm.....那么出现这些常见问题的原因是什么？..........如下图所示：好了，我们的第一个知识点来了。ParentsandChildren我们将每层楼的房间与父元素进行比较，将您和Lily与子元素进行比较。父元素的z-index决定了z轴的范围，子元素的z-index决定了范围内的层级。.second{z-index:2;/小丽家二楼/.xiaoli{z-index:1;/*小李的等级*/}}.first{z-index:1;/你家在一楼/.you{z-index:1000;/*yourlevel*/}}虽然你的等级是1000，但是等级范围仅限于一楼。所以即使玛丽的等级是1，玛丽也会在你之上。那么，当我们在样式代码中打上z-index冒号，准备以后写数字的时候，想想当前元素的父元素是谁？它的范围是什么？设置后，对谁生效？（嗯……说到对谁有效）我们继续看图：请秀一下我们的女二号，小美，你的亲妹妹。由于你们在同一个屋檐下（在同一个父级），所以可以使用z-index进行分层排列。.second{z-index:2;/小丽家二楼/.xiaoli{z-index:1;/*小李的等级*/}}.first{z-index:1;/你家在一楼/.you{z-index:1;/*你的等级*/}.xiaomei{z-index:2;/*小美的水平*/}}当然你也可以站在和姐姐一样的高度（女士们先生们）铁注，一个画风截然不同的观察者漂浮在z轴上方，暂且称它为a小天使暂且以小天使的视角为我们用户浏览页面的视角）。也可以和同学站在同一高度：仔细看上图，很多角色元素都存在于同一层。其实我们做的前端页面也是这样的。大部分元素其实都可以在同一层，只有个别元素（四楼的小李，类比页面中的弹框）会在一些特殊的层。我们现在假设每个人的xy坐标不变，只改变z坐标，每个人独占一层，但小丽一直在顶层。想象一下从上往下看会是什么样子？有没有发现小天使看到的效果和一楼很多人看到的效果其实是一样的？无论项目大小，我们都不需要那么多z-index层。但是如果只写z-index属性，层次结构可能不会生效。z-index应与位置一起使用（值不是静态的）。设置好位置后，会自动形成一个三维的z轴。取值法这里有一些管理z-index的建议：1.z-index从0开始设置（很老实朴实但是最实用也最容易维护）。a{z-index:0;}.b{z-index:1;}.c{z-index:2;}.??..为什么我不建议老铁们不要把z-index写的太大呢？首先，老手可以分析自己做过的小项目，然后全局搜索“z-index”。如果在搜索中发现很多“z-index”，尽量简化：Step1：删除一些多余的z-index（删除那些可以添加或不添加的）。第二步：合并一些不同的值（比如你有一个z-index为7，两个z-index为6，你发现把7改成6后还是能正常工作，再把7改成6）.第三步：将不同的值从小到大排列，分别替换成个位数0,1,2,3....完成这三步后，你会发现你的z-index级别不需要这么多。不管项目有多大，10个以内就完全够用了。高质量的网页肯定不是榴莲分层的，真的不会有那么多层。而且这样写也有利于后期的维护，因为数字只是从0开始的几个，如果z-index还很多，就需要考虑是否需要优化DOM结构了。当然，我们可以灵活利用这方面。如果老手引入第三方组件，组件的某个元素的level是1000，那么我们还可以在1000的基础上加（减）1,2,3...2，设置变量（管理的方法大型项目中的z-index)$zindex-dropdown:1000;$zindex-sticky:1020;$zindex-fixed:1030;$zindex-modal-backdrop:1040;$zindex-modal:1050;$zindex-popover:1060;$zindex-工具提示：1070；如上，在现代大型项目中，很多开发者都会这样使用z-index。但是，这种方法的难点在于：**（1）需要进行预预测：**我们需要为哪些组件设置z-index？下拉框、弹出框、遮罩等组件，大家是不是可以想一想，它们之间的层级顺序是怎样的，相邻层之间的数值差应该设置为10还是20？项目过程中相邻两层之间出现新层怎么办？后期维护方便吗？如果使用第三方组件库，当组件的z-index值为10000时，如何批量更改上述变量？**（2）如何记住每个变量的作用：**很明显，这段代码是要提取到一个专门的样式文件中，而不是分散在各个选择器的样式中。我们静下心来想一想，是不是每次写z-index的时候都要查询这个文件，找出应该设置哪个变量？另外，开发者的英语水平其实参差不齐。会不会导致一些人拼错单词，找bug找三个小时？开发人员忘记使用自己定义的变量是很常见的。如果z-index的形式多种多样（既有变量也有数字），最后如何整合呢？3、设置动态值不管z-index玩什么，其实质还是一样简单，就是控制z轴上的那些层级。动态设置z-index的值就是用户触发一个操作，然后z-index的级别发生变化。写这个方法的时候要注意触发操作后z-index的结果值。控制层级的方法z-index只是控制层级的方法之一。那么除了设置z-index之外，我们还有哪些方法可以控制层级呢？我们还可以使用float、position、flex、opacity、transform、filter、clip-path（css区域类属性）、网页media属性、lastcomer等方法来实现分层排列。（后来者先到：在HTML中，后元素可以配合"margin-top:negativenumber"来覆盖前元素）原因是：具有以上属性的元素必须依赖其他层次来证明自己的存在，这样页面会生成多层的时候，会有层级的概念。事实上，现在市面上很多大型网站都存在一些肉眼可见的层次问题。所以，这类属性要控制好，尽量少，用更安全的方法替换风险更大的属性。那么传说中的stacking-context是什么呢？如果要形象地解释一下，就是上例中的地板。一楼不管住多少人，都是层叠的文脉；小丽住在二楼，一个人住也是层叠文脉。感受下面两张图：另外，父元素是flex布局，子元素可以直接使用z-index来控制层级。那么z-index:0和z-index:auto有什么区别呢？具有z-index:0的元素是堆叠上下文元素，而具有z-index:auto的元素是标准层上的普通元素。前端人员要学的东西很多，范围也很广，但页面展示其实是最贴近用户的部分。如果我们能稍微克制一下浮躁，耐心地研究几分钟CSS问题，做一个总结，反复打磨我们的项目。整个页面的质量会快速提升几个档次，用户也能最直接的感受到整个页面的温度。好了说了这么多，其实看完文章，真正的掌握还是要靠大家在项目中一点一滴的实践！同学们加油！如果有同学能结合实际项目给我一些建设性的建议，将不胜感激！另外，本文若有敏感词或逻辑错误，还望提醒！我一定会及时改正的！呜~——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————文献：https://www.smashingmagazine....https://ishadeed.com/article/...
