用 CSS 覆盖两个部分
Overlaying two sections with CSS
我正在设计，我需要将一个部分覆盖在其他部分之上，以保持这样的曲线
Design
所以我创建了两个部分，第一个（蓝色）和第二个（灰色），看起来像这样
Pre CSS
我正在使用 属性 translateY 提高第二部分，但它覆盖了第一部分，我失去了曲线
post Css
我试过使用 属性 z-index，但它似乎不起作用，我不想使用 属性 位置：absolute/relative，因为是不同的部分。有人带东西吗？
I've tried using property z-index, but it seems not work
要让 z-index 为您工作，位置 属性 不能是静态的 。如W3Schools所述：
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).
我无法检查，因为您没有提供 fiddle，您的 CSS 部分是否有这样的位置？
.section-1 { position: relative; z-index:1; }
.section-2 { position: relative; z-index:2; }
我正在设计，我需要将一个部分覆盖在其他部分之上，以保持这样的曲线 Design
所以我创建了两个部分，第一个（蓝色）和第二个（灰色），看起来像这样 Pre CSS
我正在使用 属性 translateY 提高第二部分，但它覆盖了第一部分，我失去了曲线 post Css
我试过使用 属性 z-index，但它似乎不起作用，我不想使用 属性 位置：absolute/relative，因为是不同的部分。有人带东西吗？
I've tried using property z-index, but it seems not work
要让 z-index 为您工作，位置 属性 不能是静态的 。如W3Schools所述：
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).
我无法检查，因为您没有提供 fiddle，您的 CSS 部分是否有这样的位置？
.section-1 { position: relative; z-index:1; }
.section-2 { position: relative; z-index:2; }