Z-index 未正确显示

Question

我已经连续放置了 3 张图片，我需要第一张图片的底部与其下方的行重叠。在移动视图中，我需要第一个图像与第二个图像重叠。我的问题是，即使在阅读这么多主题时“正确”放置 z-index，我仍然没有得到预期的结果。我已经更改了边距，放置了 z-index 值，为图像提供了正确的定位，但仍然没有任何反应。

图 1 显示了当前视图，以及它在移动设备上的外观，图 2 显示了它在正常工作时的外观。

Image 1 Image 2

这是 HTML，我用于网站的这个特定部分：

     <div class="container-fluid">
            <div class="row ">   
                <div class = "three-images">
                        <div class="col-md-4 col-sm-4">
                            <img src = "image/sox.png" class = "img-responsive" id ="first-image">
                                <div class="carousel-caption">
                                        <div class ="text-one">
                                        <span><h1>About<br>ShortsTV<br>Oscars<br></h1></span>
                                        </div>
                                </div>
                        </div>

                        <div class="col-md-4 col-sm-4 ">
                            <img src = "image/2.jpg" class = "img-responsive" id ="second-image">
                            <div class="carousel-caption">
                                    <div class = "text-two">
                                        <div class ="who">WHO ARE WE</div>
                                        <span1><h3>Lorem ipsum dolor sit amet<br>adipiscing elit<br></h3></span1>
                                        <div class = "who">Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Nulla quam velit, vulputate eu<br>
                                                                        pharetna nec, mattis ac neque. Duis vulputate</div>
                                    </div>
                                        <a class="btn btn-primary" href="#" role="button">Watch Trailer</a>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-4">
                            <img src ="image/3.jpg" class ="img-responsive" id ="third-image">
                                    <div class="carousel-caption">
                                        <div class = "text-three">
                                            <span><h1>How to get
                                                    ShortsHD (US) or 
                                                    ShortsTV (Europe)
                                            </h1></span>
                                        </div>
                                    </div>
                        </div>

                </div>
            </div>

            <div class= "row">
                <div class ="big-image">
                    <img src = "image/4.jpg" class= "img-responsive">
                </div>
            </div>

这是我用来编辑图像的 CSS：

             #first-image{
              height: 500px;
              position:absolute;
              z-index:30;
              margin-bottom: -30px;
              }

              #second-image{
              height: 440px;
              filter: brightness(50%);
              z-index:10;

              }

              .big-image{
               position:relative;
               z-index:20;

               }

Answer 1

使用这个

   #first-image{
              height: 500px;
              position:absolute;
              z-index:30 !important;
              margin-bottom: -30px;
              }

              #second-image{
              height: 440px;
              filter: brightness(50%);
              z-index:10 !important;

              }

              .big-image{
               position:relative;
               z-index:20  !important;

               }