html - CSS轮播幻灯片的z-index

Question

friend 们，我想创建我自己的基于单选按钮的纯 CSS 轮播导航。它工作正常，但有一个问题我无法解决，需要您的指导。每当检查 radio 时，其相关幻灯片都会以较高的 z-index 动画显示在前面。问题是默认情况下所有其他幻灯片都具有相同的 z-index，因此最后一张幻灯片始终在后面可见。有没有办法在不使用任何脚本的情况下在后面显示之前检查过的幻灯片？这是演示 https://jsfiddle.net/alikhan99/sg9qy5um/1/

#slider {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slideWrapper {
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #666;
  color: #fff;
  left: 0;
  z-index: 1;
}

.slide2 {
  background-color: #090;
}

.slide3 {
  background-color: #009;
}

.slide4 {
  background-color: #900;
}

#slide1:checked~.slideWrapper .slide:first-child,
#slide2:checked~.slideWrapper .slide:nth-child(2),
#slide3:checked~.slideWrapper .slide:nth-child(3),
#slide4:checked~.slideWrapper .slide:nth-child(4) {
  z-index: 2;
  animation: slideAnimation 4s ease 0s forwards;
}

@keyframes slideAnimation {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

<div id="slider">
  <input checked type='radio' name='slider' id='slide1' />
  <input type='radio' name='slider' id='slide2' />
  <input type='radio' name='slider' id='slide3' />
  <input type='radio' name='slider' id='slide4' />

  <div class="slideWrapper">
    <div class="slide slide1">
      <div class="slideContent">
        <h2>Slide One</h2>
      </div>
    </div>

    <div class="slide slide2">
      <div class="slideContent">
        <h2>Slide Two</h2>
      </div>
    </div>

    <div class="slide slide3">
      <div class="slideWContent">
        <h2>Slide Three</h2>
      </div>
    </div>

    <div class="slide slide4">
      <div class="slideWContent">
        <h2>Slide Four</h2>
      </div>
    </div>
  </div>
</div>

Answer 1

你是说这样？

#slider {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slideWrapper {
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #666;
  color: #fff;
  left: 0;
  z-index: 1;
  animation: slideAnimation1 4s ease 0s forwards;
}

.slide2 {
  background-color: #090;
}

.slide3 {
  background-color: #009;
}

.slide4 {
  background-color: #900;
}

#slide1:checked~.slideWrapper .slide:first-child,
#slide2:checked~.slideWrapper .slide:nth-child(2),
#slide3:checked~.slideWrapper .slide:nth-child(3),
#slide4:checked~.slideWrapper .slide:nth-child(4) {
  z-index: 2;
  animation: slideAnimation 4s ease 0s forwards;
}

@keyframes slideAnimation {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes slideAnimation1 {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

<div id="slider">
  <input checked type='radio' name='slider' id='slide1' />
  <input type='radio' name='slider' id='slide2' />
  <input type='radio' name='slider' id='slide3' />
  <input type='radio' name='slider' id='slide4' />

  <div class="slideWrapper">
    <div class="slide slide1">
      <div class="slideContent">
        <h2>Slide One</h2>
      </div>
    </div>

    <div class="slide slide2">
      <div class="slideContent">
        <h2>Slide Two</h2>
      </div>
    </div>

    <div class="slide slide3">
      <div class="slideWContent">
        <h2>Slide Three</h2>
      </div>
    </div>

    <div class="slide slide4">
      <div class="slideWContent">
        <h2>Slide Four</h2>
      </div>
    </div>
  </div>
</div>