Z-Index 在引導輪播中不起作用

Question

我有一個引導輪播，其中一張幻燈片由 4 個 Css 盒子（頂部 2 個，底部 2 個）組成。 它們有一個陰影，頂部兩個框的陰影覆蓋了底部的一個。

我知道必須定位元素才能應用 z-index，但是設置 position （ relativ)並增加較低元素的 z-index 不起作用。

是不是因為一張幻燈片由兩行（上下）組成，因此它們有不同的父（flex-）容器？ 我仍然不明白為什么 Z-Index 沒有影響，因為flex的行為應該像inline-block 。

這是代碼（在哈巴狗中）：

              .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; }