Question

我在4张图片上应用css动画来创建自动幻灯片。我认为z-index已经改变，或者我的方法有一个严重的问题，页面的分层搞砸了，这里是html代码，在这段代码中，一个潜水是动画而另一个不是。

  <div class="evidence-of-work">
    <div class="website-app">
      <p class= "wrok-title">Coding project</p>
      <a href="./web.html">
        <ul class="autoSlide-items">
            <li class="autoSlide-item">
              <img class="website-screenshot" src="./img/website_screenshot.png" alt="an iphone 6 mobile showing a blond woman in dark blue jacket looking at camera- also some text underneath.">
            </li>
            <li class="autoSlide-item">
              <img src="./img/web-woman-1.png" alt="an iphone 6 mobile showing 2 items of closing placed vertically with the explanation underneath">
            </li>
            <li class="autoSlide-item">
              <img src="./img/web-detail-2png.png" alt="an iphone 6 mobile showing detail of a selected clothing and purchase button">
            </li>
            <li class="autoSlide-item">
              <img src="./img/web-shipping-address-1.png" alt="an iphone 6 mobile shwoing a from for shipping the item to the customer">
            </li>
          </ul>
        </a>
      <p class="work-explanation">An Online shopping website for woman, resposive to the browing device</p>
    </div>
    <div class="daycare-app">
      <p class= "wrok-title">UX desing project</p>
      <a href="./mobile-app.html">
         <img class="daycare-app-screenshot" src="./img/daycare-mobile-screenshot.PNG" alt="">
      </a>
      <p class="work-explanation">A mobile app helping parents to manage communicating with daycare staff easier</p>
    </div>
  </div>

这是css：

.evidence-of-work{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 5rem;
}
.website-app,.daycare-app{
  position: relative;
  max-width: 70%;
  margin: 50px 0px;
}

.daycare-app{
  order: 1;
}

.autoSlide-items{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.autoSlide-item {
  width: 120%;
  margin-top:-2rem !important;
  z-index: 0 !important;
}
.autoSlide-items img{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 100%;
  justify-content: center;
}
.autoSlide-item:nth-child(1) {
  opacity: 0;
  animation: xfade 32s 0s infinite;
}
.autoSlide-item:nth-child(2) {
  opacity: 0;
  animation: xfade 32s 8s infinite;
}
.autoSlide-item:nth-child(3) {
  opacity: 0;
  animation: xfade 32s 16s infinite;
}
.autoSlide-item:nth-child(4) {
  opacity: 0;
  animation: xfade 32s 24s infinite;
}
@keyframes xfade{
  17% {
    opacity:1;
  }
  40% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}

.work-explanation{
  text-align: center;
  color:gray;
  font-kerning: 2rem;
  font-size: 1rem;
}
.wrok-title{
  text-align: center;
  color:gray;
  }

我遇到的问题是动画部分覆盖了文本。此外，其类称为“工作 - 解释”的文本元素应该显示在滑动照片的下方，但它位于上部文本元素的正下方，其类称为工作标题。我真的很困惑，有些身体可以给我一些提示吗？

动画是否会更改ul的z-index？

0 个答案: