Html 如何应用z-index属性，使上一个元素与下一个元素重叠？

我想知道是否有可能使用CSS使上一个块与下一个块重叠

.container{
填充：70px；
宽度：500px；
保证金：自动；
显示器：flex；
}
.街区{
左边距：-30px；
宽度：200px；
高度：100px；
边框：1px点绿色；
变换：倾斜（20度）
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}

文本。。。
文本。。。
文本。。。
文本。。。

考虑三维旋转：

.container{
填充：70px；
宽度：500px；
保证金：自动；
显示器：flex；
变换样式：preserve-3d；/*对技巧很重要*/
}
.街区{
左边距：-30px；
宽度：200px；
高度：100px；
边框：1px点绿色；
变换：旋转（-1deg）歪斜（20deg）/*此处的微小旋转*/
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}

文本。。。
文本。。。
文本。。。
文本。。。

您可能需要使用JS或jQuery

例如，对于jQuery，您可以使用这样一个非常简单的函数，将每个块的z索引增加一个：

$（“.block”）。每个（函数（i）{
我++
$（this.css（“z-index”，i）；
});
.container{
填充：70px；
宽度：500px；
保证金：自动；
显示器：flex；
}
.街区{
左边距：-30px；
宽度：200px；
高度：100px；
边框：1px点绿色；
变换：倾斜（20度）
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}

文本。。。
文本。。。
文本。。。
文本。。。
您需要使用CSS预处理器循环。谢谢，但我只想使用cssAh my bad-不用担心。