使div位于具有关系的另一个下面

Question

如何使导航箭头位于图像旋转木马下方的固定位置，以使它们在浏览器大小调整时仍可响应移动？

现在，我可以让箭头位于我想要的位置，但当它被调整时，它不会与图像一起移动。我使用Glide (http://jedrzejchalubek.com/glide/)作为图像轮播。

.slider-arrow {
display:block;
position:fixed;
font-family: 'Roboto', sans-serif;
font-size: 20px;

}

.slider-arrow--right {  
margin-left: 60%;

}

.slider-arrow--left {
margin-left: 40%;

}

Answer 1

有多种方法可以做到这一点。最简单的方法可能是将箭头放在图像所在的同一div中。然后，您可能希望为div设置text-align=left样式，以使箭头左对齐。但是，在继续之前，我建议您更好地了解CSS布局。一旦你理解了相对定位、固定定位和绝对定位是如何工作的，事情就会变得容易得多。请参阅此链接：http://learnlayout.com/position.html

#imgdiv {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 400px;
    margin-left: -200px;
    height: 400px;
    margin-top: -200px;
    text-align: left;
}

<div id="imgdiv">
    <img src="img1.jpg"><br><img src="arrow1.jpg">&nbsp;<img src="arrow2.jpg">
</div>