在网页设计中，我们经常利用svg图形来创建动态且响应式的背景效果，例如波浪形分隔线。然而，一个常见的问题是，当这些svg元素被设置为背景或装饰时，它们可能会意外地覆盖掉同一容器内的其他文本或图片内容，导致内容不可见。这通常是由于css定位属性和层叠上下文的交互方式所引起的。
理解问题根源：CSS定位与层叠上下文
在CSS中，元素的显示顺序（即哪个元素在另一个元素之上）由其层叠上下文（Stacking Context）和z-index属性决定。默认情况下，HTML元素按照它们在文档流中的顺序进行渲染。然而，当元素使用position属性（如relative, absolute, fixed, sticky）脱离默认文档流或创建新的层叠上下文时，它们的层叠顺序会变得更加复杂。
在提供的代码示例中，我们看到一个.Upper-half-wrapper容器，它包含了一个用于生成波浪形SVG的.custom-shape-divider-top-1655888002元素，以及一个用于显示实际内容的.Upper-half-content元素。
原始CSS片段：
.Upper-half-wrapper {
background-color: #0A2640;
height: 515px;
position: relative; /* 父容器相对定位 */
}
.custom-shape-divider-top-1655888002 {
position: absolute; /* SVG容器绝对定位 */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1655888002 svg {
position: relative; /* SVG元素自身相对定位 */
display: block;
width: calc(100% + 1.3px);
height: 266px;
transform: rotateY(180deg);
}原始HTML结构：
立即学习“前端免费学习笔记（深入）”；
Some text
这里的问题在于，.custom-shape-divider-top-1655888002被设置了position: absolute;。绝对定位的元素会脱离文档流，并且其默认的层叠顺序通常会高于其兄弟元素中那些未定位（position: static;）的元素。而.Upper-half-content默认是position: static;，因此它在层叠顺序上会低于绝对定位的SVG容器，导致SVG波浪覆盖了“Some text”内容。
虽然SVG内部的svg元素自身也被设置为position: relative;，但这只是针对SVG自身内部的定位，并不能改变其父容器.custom-shape-divider-top-1655888002与.Upper-half-content之间的层叠关系。
解决方案：为内容元素创建新的层叠上下文
解决此问题的关键是为需要显示在SVG之上的内容元素（即.Upper-half-content）创建一个新的层叠上下文，并将其置于SVG之上。最简单有效的方法是为内容元素也应用一个非static的position属性，例如position: relative;。
当一个元素被设置为position: relative;时，即使不指定z-index，它也会创建一个新的层叠上下文。在这个新的层叠上下文中，该元素及其子元素将获得更高的层叠优先级，从而能够显示在那些position: static;的兄弟元素以及某些position: absolute;的兄弟元素之上。
修改后的CSS代码：
.Upper-half-wrapper {
background-color: #0A2640;
height: 515px;
position: relative;
}
.custom-shape-divider-top-1655888002 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
/* 可选：如果SVG需要明确在内容之下，可以设置较低的z-index */
/* z-index: 1; */
}
.custom-shape-divider-top-1655888002 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 266px;
transform: rotateY(180deg);
}
.custom-shape-divider-top-1655888002 .shape-fill {
fill: #1B3B5D;
}
/* 关键修改：为内容元素添加相对定位 */
.Upper-half-content {
position: relative; /* 使内容元素脱离默认层叠顺序，并创建新的层叠上下文 */
/* 可选：如果需要，可以设置z-index来明确其层叠顺序 */
/* z-index: 2; */
/* 其他内容样式，例如： */
color: white;
padding: 20px;
text-align: center;
}通过将position: relative;应用于.Upper-half-content，我们确保了它能够正确地堆叠在.custom-shape-divider-top-1655888002之上。即使不显式设置z-index，这种定位也足以改变其默认的层叠行为。如果存在更复杂的层叠需求，可以进一步结合z-index属性来精确控制元素的堆叠顺序，其中z-index值越大，元素越靠上。
总结与注意事项
- 层叠上下文的重要性： 理解position属性如何创建层叠上下文是解决这类问题的关键。任何非static定位的元素（relative, absolute, fixed, sticky）都会创建一个新的层叠上下文。
- z-index的依赖性： z-index属性只对已定位（position为非static）的元素有效。
- 默认行为： 未定位的元素（position: static;）总是位于已定位元素之下，除非通过z-index明确调整。
- 调试技巧： 当遇到层叠问题时，可以使用浏览器开发者工具检查元素的position和z-index属性，并通过高亮显示元素来直观地判断它们的堆叠关系。
通过上述方法，我们可以轻松解决SVG背景覆盖内容的问题，确保页面元素按预期层叠显示，从而实现更灵活和美观的网页布局。
