z-index 问题 |四个中的第一个 div 无法正常工作

Question

所以为了练习我想做的是模仿以下内容：

但我一直在处理以下问题:

我不明白为什么会这样。奇怪的是，如果我删除第一个 div，第二个（现在变成第一个）将面临同样的问题。此外，由于所有四个 div 共享相同的 css 如果不是 z-index，为什么只有第一个有这样的行为？

这是我的 HTML（为简洁起见缩短）：

<div class="row">
    <!-- Card #1 -->
    <div class="col-md-3">
      <div class="card-container first-card">
        <div class="card-component">
          <a href="#">
            <div class="front">
              <img src="img/img-presentation1.jpg" alt="" />
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card #2 -->
    <div class="col-md-3">
      <div class="card-container second-card">
        <div class="card-component">
          <a href="#">
            <div class="front">
              <img src="img/img-presentation1.jpg" alt="" />
            </div>
          </a>
        </div>
      </div>
    </div> 
</div>

<div class="row bg-grey">

和 CSS:

#sliding-cards .card-container {
  perspective: 900px;
  width: 300px;
  position: relative;
  margin-top: 90px;
}

#sliding-cards .card-component{
  transform-style: preserve-3d;
  position: relative;
  height: 500px;
}

#sliding-cards .front {
   transform: rotateY(-35deg);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
}

#sliding-cards img{
  vertical-align: middle !important;
  border-style: none;
  width: 100%;
  z-index: 2;
  position: relative;
  max-width: 100%;

}

这些卡片的 z-index 分别为 6-5-4-3，它们下面的 div（灰色背景的）的 z-index 为：7;

JSFiddle

感谢大家对我的支持！

Answer 1

您可以通过将 z-index: -999999 添加到 .front

来解决此问题

html,
body {
  overflow-x: hidden;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: #333;
}

#sliding-cards .section-components {
  background: black;
  padding: 70px 0;
  z-index: 1;
  color: #FFFFFF;
  position: relative;
}

#sliding-cards .col-md-3 {
  max-width: 16%;
  padding-left: 100px;
}

#sliding-cards .card-container {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  width: 300px;
  position: relative;
  margin-top: 90px;
}

#sliding-cards .card-component {
  webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  height: 500px;
}

#sliding-cards .front {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-35deg);
  -moz-transform: rotateY(-35deg);
  -o-transform: rotateY(-35deg);
  transform: rotateY(-35deg);
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFF;
  width: 100%;
  cursor: pointer;
  box-shadow: 10px 4px 14px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
   z-index: -9999;
}

#sliding-cards img {
  vertical-align: middle !important;
  border-style: none;
  width: 100%;
  z-index: 2;
  position: relative;
  max-width: 100%;
  border-radius: 1px;
}

#sliding-cards .first-card {
  z-index: 6;
  position: relative;
}

#sliding-cards .second-card {
  z-index: 5;
  position: relative;
}

#sliding-cards .third-card {
  z-index: 4;
  position: relative;
}

#sliding-cards .fourth-card {
  z-index: 3;
  position: relative;
}

#spaceholder {
  margin-top: -270px;
  z-index: 7;
  position: relative;
  border-top: 1px solid rgba(231, 231, 231, 0.5);
  padding: 190px 0;
  overflow: hidden;
  background: grey;
}

 <section id="sliding-cards" class="bg-dark-red py-5">
   <div class="section-components">
     <div class="container">
     
       <div class="row"></div>
       
       <div class="row">
         <!-- Card #1 -->
         <div class="col-md-3">
           <div class="card-container first-card">
             <div class="card-component">
               <a href="#">
                 <div class="front">
                   <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
         <!-- Card #2 -->
         <div class="col-md-3">
           <div class="card-container second-card">
             <div class="card-component">
               <a href="#">
                 <div class="front">
                   <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
         <!-- Card #3 -->
         <div class="col-md-3">
           <div class="card-container third-card">
             <div class="card-component">
               <a href="#">
                 <div class="front">
                   <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
         <!-- Card #4 -->
         <div class="col-md-3">
           <div class="card-container fourth-card">
             <div class="card-component">
               <a href="#">
                 <div class="front">
                   <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </section>

 <section id="spaceholder"></section>

z-index 问题 |四个中的第一个 div 无法正常工作

z-index issue | first div of four not working properly

html

css

z-index

twitter-bootstrap