使用z-index将div取得另一个div
我希望div1高于div2 。 我尝试使用z-index但它不起作用。
我试过这个代码：
div { width: 100px; height: 100px; } .div1 { background: red; z-index: 1; } .div2 { background: blue; margin-top: -15vh; z-index: 2 }
<div class="div1"></div> <div class="div2"></div>
您可以添加position: relative对于这两个div和创buildstacking context
div { width:100px; height: 100px; } .div1 { background: red; z-index: 2; position: relative; } .div2 { background: blue; margin-top: -15vh; z-index: 1; position: relative; }
<div class="div1"></div> <div class="div2"></div>
在很多情况下，一个元素必须被定位为z-index才能工作。
实际上，应用position: relative对于问题中的div将解决z-index问题。
实际上， position: fixed ， position: absolute和position: sticky也会启用z-index ，但是这些值也会改变布局。 有position: relative布局不受干扰。
基本上，只要元素不是position: static （默认值），它就被认为是定位的， z-index将起作用。
这里和相关问题的一些答案断言z-index 只适用于定位元素。 从CSS3开始，这不再是事实。
即使position是static ， Flex项目或网格项目的元素也可以使用z-index 。
从规格：
4.3。 Flex Item Z-Ordering
除了用顺序修改的文档顺序代替原始文档顺序之外，Flex项目的绘制与内嵌块完全相同，即使
position是static，z-index值也不是auto创build堆栈上下文。5.4。 Z轴sorting：
z-index属性网格项目的绘制顺序与内嵌块完全相同，不同之处在于，使用顺序修改的文档顺序代替原始文档顺序，即使
position是static，z-index值也不是auto创build堆栈上下文。
这是一个z-index在非定位flex项目上的演示： https : //jsfiddle.net/m0wddwxs/
z-index只适用于static position以外的元素，例如： relative ， absolute或fixed 。
div { width:100px; height: 100px; position:relative; } .div1 { background: red; z-index: 2; } .div2 { background: blue; margin-top: -15vh; z-index: 1 }
<div class="div1"></div> <div class="div2"></div>
div的默认属性是position:static ，Add position:relative在这两个div只有z-index会起作用。
