Question

您好我想在不使用绝对定位的情况下将包含图像的列表项放在彼此之上（如一堆卡片）。

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

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

和cards为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;
}

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

1 个答案: