时间戳

首页 > 解决方案 > Z-Index 在引导轮播中不起作用

html - Z-Index 在引导轮播中不起作用

问题描述

我有一个引导轮播，其中一张幻灯片由 4 个 Css 框（顶部 2 个，底部 2 个）组成。它们有一个阴影，顶部两个框的阴影覆盖了底部的一个。

在此处输入图像描述

我知道必须定位元素以便应用 z-index，但是设置位置（到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

标签： htmlcssbootstrap-4pugz-index

解决方案

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

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

CSS：

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

推荐阅读