Hey there! I am trying to figure out a way to stack list items containing images on top of each other, like a deck of cards, but without resorting to absolute positioning.
I attempted to do it using absolute positioning, here's what I came up with:
.cards {
width: 200px;
height: 200px;
position: absolute;
top:75px;
}
The cards are represented by li elements with an img inside.
However, the issue arises when I resize the window or view the page on a mobile device. So instead, I thought about placing my stack of cards within a centered container to prevent the list items from shifting around as the window size changes.
Here is the setup for my container:
<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>
Any suggestions? Thanks a bunch!