html - 将下一个和上一个箭头放在图像的两侧

Question

我在 div 中有一个大小为 300px 的图像，我想在图像的任一侧放置下一个和上一个箭头。但是还有一个额外的问题是，如果屏幕是 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）和子级的绝对定位，它们将相对于其父级是绝对的。