让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>