html - 带有绝对定位的儿童不工作的旋转木马

Question

我正在用 HTML/CSS 构建一个轮播，但遇到了一个我无法理解的问题。

我已将子项 (.card) 绝对定位在轮播容器中，并希望他们在单击下面的链接时左右滑动。当从 card4 向后移动到 card1 时，这可以正常工作，但不能从 card1 向前移动到 card4。然后它只是跳到 card4 并且似乎将活动卡推离了屏幕。

奇怪的是，当我将非活动卡片的位置编辑为

left:95%;

代替

left:100%;

（请参阅 CSS 片段的最底部），它按预期工作。

在 Chrome、Firefox 和 Codepen 上测试 CodePen 查看

非常感谢您的帮助。

这是我的代码：

*{
  box-sizing: border-box;
}

.carousel-links{
  text-align:center;
  position:fixed;
  bottom: 5%;
  left:0;
  right:0;
  z-index:100;
}
.carousel-links a{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid black;
  padding: 1em;
  background:white;
}


.carousel{
  position: relative;
  width:100%;
  height:80vh;
  background:yellow;
  border:5px solid black;
  display:block;
  overflow-x: hidden;
}
.card{
  position: absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  border: 1px dashed black;
  font-size:100px;
  transition: all 2s;
  z-index:1;
}
.carousel > .card:target{
  left:0%;
  //background:rgba(255,0,0,1);
  z-index:2;
}
.carousel > .card:target~*{
  left:100%; 
  /* left:95%;  /*with this line it works */
  z-index:0;
}

<div class="carousel-links">
  <a href="#card1">1</a>
  <a href="#card2">2</a>
  <a href="#card3">3</a>
  <a href="#card4">4</a>
</div>

<div class="carousel">
  <div class="card" id="card1">1</div>
  <div class="card" id="card2">2</div>
  <div class="card" id="card3">3</div>
  <div class="card" id="card4">4</div>
</div>

标签： htmlcsscss-positioncarouselabsolute