在图像的任一侧放置下一个和上一个箭头

Question

我在一个大小为300px的div中有一个图像，并且我希望图像任一侧的下一个和上一个箭头。然而，有一个额外的问题是，如果屏幕是300像素，我希望箭头位于图像的顶部。如何才能做到这一点？

我的div代码如下：

<!--this div is the container for the carousel --> 
<div id='mySwipe' style='max-width:300px; margin:0 auto' class='swipe'> 
    <!--the images are in this div --> 
    <div class='swipe-wrap'id="featured"> 
    </div> 
</div> 

Answer 1

.container { position: relative; } 

.container .arrow { position: absolute; top: 150px; } 

.container .arrow.left { left: 0; } 

.container .arrow.right { right: 0; } 

通过相对定位设置父（默认为static）和绝对定位的孩子，他们将是相对于他们的父母是绝对的。