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;

               }

Z-index无法正常显示

1 个答案: