CSS V形无法显示在后续带背景DIV上方问题求助

嘿，这个问题我之前也碰到过！核心原因是z-index只对非static定位的元素生效，你大概率没给那个red-v-neg元素设置定位属性，导致你加的z-index完全不起作用～

为什么会出现这个情况？ #

默认情况下，所有块级元素的position属性是static，这种状态下浏览器会按照元素在HTML中的出现顺序来决定堆叠层级——后面的元素会覆盖前面的。哪怕你给static元素加了z-index，浏览器也会直接忽略这个属性。

当你给content 2的div设置margin-top: -100px时，它只是向上移动了位置，但本质上还是在HTML流的后面，所以会覆盖前面的red-v-neg。

解决步骤 #

只需要给red-v-neg添加两个CSS属性就行：

.red-v-neg {
  /* 保留你原来的所有样式 */
  position: relative; /* 关键：把元素变成定位元素 */
  z-index: 10; /* 设置一个比content2更高的层级值 */
}

• position: relative：不需要改变元素的位置（因为relative默认还是在原位置），但会让元素进入定位状态，此时z-index才会生效。
• z-index: 10：只要这个值比content 2的层级高就行（content2默认是0，所以随便设个正数都能覆盖它）。

这样修改后，red-v-neg就会被浏览器渲染在content 2的上方了～

内容的提问来源于stack exchange，提问作者diegie