代码之家 › 专栏 › 技术社区 › Perezo123

位置绝对元素:如何让他反应灵敏

absolute responsive position css

Perezo123 · 技术社区 · 7 年前

我正在使用两个箭头键进行图像滑动,问题是当我尝试将视图端口更改为更小的时候。图像滑块会相应地更改其大小,但箭头键不会。不知道如何将它们附加到图像滑块并使其响应。当我从显示器切换到分辨率较小的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;
}

2 回复 | 直到 7 年前

Axnyff 7 年前

为什么要给右箭头的左属性赋予如此高的值?如果您使用正确的属性,则可能会奏效:

.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),它应该可以工作

George 7 年前

这是因为你给了向右箭头一个固定的左空格我建议不要 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>

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