用 CSS 覆盖两个部分

Question

我正在从事设计工作，我需要将一个部分覆盖在另一个部分上，以保持这样的曲线 Design

所以我创建了两个部分，第一个（蓝色）和第二个（灰色），看起来像这样 Pre CSS

我正在使用属性 translateY 来提升第二部分，但它覆盖了第一部分，我失去了曲线 post Css

我尝试使用属性 z-index，但它似乎不起作用，我不想使用属性位置：绝对/相对，因为是不同的部分。有人自带东西吗？

Answer 1

我尝试过使用属性 z-index，但它似乎不起作用

要让 z-index 为您工作，position 属性不能是静态的。如W3Schools中所述：

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘性）和弹性项目（显示的直接子元素：弹性元素）。

由于您没有提供小提琴，我无法检查，您的部分 CSS 是否有这样的位置？

.section-1 { position: relative; z-index:1; }
.section-2 { position: relative; z-index:2; }