Z索引在引导转盘中不起作用

Question

我有一个引导转盘，其中一张幻灯片由4个Css框组成(2个在顶部，2个在底部)。它们有一个阴影，顶部两个盒子的阴影覆盖了底部的一个盒子。

​

​

我知道必须对元素进行定位，这样才能应用z索引，但是设置位置(设置为relativ)并在较低的元素上增加z索引)并不起作用。

是不是因为一张幻灯片由两行(上行和下行)组成，因此它们有不同的父(flex-)容器？我仍然不明白为什么Z指数没有影响，因为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

Answer 1

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

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

CSS：

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