Z-Index 在 Bootstrap Carousel 中不起作用

如何解决Z-Index 在 Bootstrap Carousel 中不起作用

我有一个 bootstrap carousel，其中一张幻灯片包含 4 个 Css 框（顶部 2 个，底部 2 个）。它们有阴影，顶部两个盒子的阴影覆盖了底部的一个。

我知道必须定位元素才能应用 z-index，但设置位置（设置为 relativ) 并增加较低元素的 z-index 不起作用。

是否因为一张幻灯片由两行（上下）组成，因此它们有不同的父（flex-）容器？我仍然不明白为什么 Z-Index 没有影响，因为 flex 应该表现得像 inline-block。

这是代码（在 pug 中）：

              .carousel-inner
                .carousel-item.active
                    .row.mt-lg-4.mt-2
                        .col-lg-6.col-12
                            .container-fluid.h-100
                                .carousel-card.d-flex.flex-Nowrap.align-items-center
                                    .col-3.text-center
                                        img(src='img/examination-anxiety-icon.svg').img-fluid 
                                    .col-9
                                        h3 Header
                                        p.text-left "Text"
                        .col-lg-6.col-12
                            .container-fluid.h-100
                                .carousel-card.d-flex.flex-Nowrap.align-items-center
                                    .col-3.text-center
                                        img(src='img/decision-difficulties-icon.svg').img-fluid  
                                    .col-9
                                        h3 Header
                                        p.text-left Text
                    .row
                        .col-lg-6.col-12
                           container-fluid.h-100
                                .carousel-card.d-flex.flex-Nowrap.align-items-center
                                    .col-3.text-center
                                        img(src='img/mobbing-icon.svg').img-fluid  
                                    .col-9   
                                        h3 Header
                                        p.text-left Text
                        .col-lg-6.col-12
                            .container-fluid.h-100
                                .carousel-card.d-flex.flex-Nowrap.align-items-center
                                    .col-3.text-center
                                        img(src='img/life-crisis-icon.svg').img-fluid  
                                    .col-9   
                                        h3 Header
                                        p.text-left Text

解决方法

您必须为 .row 元素设置额外的 css。

... 
   .row.z-down
      ...
   .row.z-up
      ...
...

CSS：

.row { position: relative; }
.row.z-down { z-index: 0; }
.row.z-up { z-index: 1; }