html - 没有绝对定位的堆叠列表项

Question

您好，我想在不使用绝对定位的情况下将包含图像的列表项放在彼此的顶部(如一叠卡片)。

这是我使用绝对定位的方式。

.cards {
    width: 200px;
    height: 200px;
    position: absolute;  
    top:75px;  
}

和卡片是li，里面有一个img。

但是当我调整窗口大小时或在移动设备上查看我的页面时，这会导致问题。因此，我考虑将我的一叠卡片放在一个居中的容器中，以防止列表项在窗口大小发生变化时四处移动。

这是我的容器

  <div class="col-md-4">
    <ul class="swing-stack">
       <li class="cards" ng-repeat="card in cards"><img ng-src="{{card.image}}"></li>
    </ul>
  </div>

有什么想法吗？谢谢!

Answer 1

您需要使用绝对定位来实现这一点。为了帮助解决这个问题，绝对定位导致您在它们之外使用相对定位的 div。相对位置容器内的绝对定位元素从其父项的左上角开始定位，而不是页面。

#cardsContainer {
    position:relative;
    top: 75px;
}

.cards {
    width: 200px;
    height: 200px;
    position: absolute;  
    top:0px;
}