Stacked Cards with CSS

If you want to implement stacked cards, there’s a great guide by CSS-Tricks on how to achieve this.

We want to be able to stack cards when scrolling down. Check out the website of Corey Ginnivan for an example.

First, create your cards in CSS as you would otherwise.

Then add the following CSS:

.card {
  position: sticky;
  top: 10px;
}

This will lead to cards stopping at 10px from the top and the following cards to float over them.

For the offset you want to change top for each card. You can either do that manually like this:

.card:nth-child(1) {
  top: 10px;
}

.card:nth-child(2) {
  top: 20px;
}

.card:nth-child(3) {
  top: 30px;
}

/* and so on */

If you use SASS , you can create a for loop like this to simplify things:

@for $i from 1 through 10 {
  .card:nth-child(#{$i}) {
    top: $i * 10px;
  }
}
Edit this page on GitHub