位置绝对元素：如何让他响应

Question

我正在用两个箭头键做图像滑块，问题是当我尝试将视口更改为更小时。图像滑块正在响应地改变他的大小，但箭头键没有。不知道如何将它们附加到图像滑块并使它们响应。当我从显示器切换到分辨率较小的 PC 时，我发现了这个问题，右箭头键消失了。

这是我奋斗的例子。 jsfiddle

<div class="container">
  <div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt="">           </div>

  <div class="arrows index">
    <a href="#" class="left"><</a>
    <a href="#" class="right">></a>
  </div>
</div>



 .container{

  max-width:1100px;
  margin: 0 auto;
  width:100%;
  height: auto;
}
.slider{
  position:relative;
}

.slider img{
  position:absolute;
  width:100%;
  height:auto;
  left:0;
  top:0;
  object-fit:cover;
}

.arrows {
  font-size: 3.125em;
  position: relative;
  width: 100%;
}

.arrows .left {
  position: absolute;
  color: white;
  top: 8em;
  left: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  left: 20.2em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

Answer 1

为什么你给右箭头左边属性这么高的值？如果您使用正确的属性代替，它可能会起作用：

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

要修复垂直定位，您应该删除图像的绝对位置。通过这样做，您的滑块将具有与图像相同的高度。然后，您可以将箭头绝对定位在滑块内（您需要更改 html），它应该可以工作

Answer 2

那是因为你给右箭头一个固定的左箭头 space 我建议而不是 left: 20.2em; 改为 right: 0.4em 所以最后的是：

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

上面的部分已经在我写答案的时候回答了，关于你对让按钮贴在图像上的评论。

css 将是：

.container{

  max-width:1100px;
  margin: 0 auto;
  width:100%;
  height: auto;
}
.slider{
  position:relative;
  border: 1px solid black;
}

.slider img{
  /* position:absolute;  this is updated*/ 
  width:100%;
  height:auto;
  left:0;
  top:0;
  object-fit:cover;
}

.arrows {
  font-size: 3.125em;
  position: relative;
  width: 100%;
}

.arrows .left {
  position: absolute;
  color: white;
  bottom: 1em; //this is updated
  left: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
  transition: 0.3s linear;
}

.arrows .right {
  position: absolute;
  color: white;
  bottom: 1em;//this is updated
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
  transition: 0.3s linear;
}

而 html 将是：

<div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt="">
      <div class="arrows index">
        <a href="#" class="left"></a>
        <a href="#" class="right"></a>
      </div>
</div>

通过这种方式，您可以将按钮作为滑块的一部分，然后将它们从底部向上移动而不是从顶部向下移动应该可以解决这个问题

位置绝对元素：如何让他响应

Position absolute element: How to make him responsive

css

position

absolute

responsive