CSS `z-index`: make list items appear beneath previous item

Question

I have a list of items which overlap slightly. The stacking order of elements inside this list should be as follows: the first element should appear on top, and the last element should appear at the bottom.

The result should look like this:

Here is my first attempt, but the overlap happens in the wrong direction:

ul {
  list-style: none;
  padding-left: 0;
  display: flex;
}

.circle {
  background-color: black;
  color: white;

  border-radius: 50%;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 5px solid white;

  margin-right: -14px;
}

<ul>
  <li>
    <div class="circle">1</div>
  </li>
  <li>
    <div class="circle">2</div>
  </li>
  <li>
    <div class="circle">3</div>
  </li>
</ul>

I understand this is because the default z-index behaviour follows the order of DOM elements: elements that appear later in the DOM will appear above elements before.

One workaround would be to manually apply a unique z-index to each list item, but this would not scale if the list was dynamic in length (number of items).

Another workaround would be to use flex-direction: row-reverse, but then the items would be in the wrong order. We could fix this by changing the DOM order, but this would break the HTML semantics.

I am interested to know if there's a solution which (1) works for all list sizes and (2) doesn't require changing the order of elements in the DOM/HTML.

are you accepting javascript/jQuery answers? this can be done easiliy with that added to the page — Ramon de Vries, Oct 02 '20 at 11:58
last snippet here: https://stackoverflow.com/a/48916502/8620333 — Temani Afif, Oct 02 '20 at 12:00
This solution suggests using `flex-direction: row-reverse`, and I explicitly mentioned in my question that this was not an acceptable answer as it breaks HTML semantics. Please re-open as this question has different constraints to the question you linked to—it is not a duplicate. — Oliver Joseph Ash, Oct 02 '20 at 12:03
I explicitely said *last snippet*. Come one, read until the end of the answer please ... — Temani Afif, Oct 02 '20 at 12:04
The `scale` solution reverses the element completely, so now the numbers read backwards? https://stackblitz.com/edit/typescript-jaxnpn?file=index.html — Oliver Joseph Ash, Oct 02 '20 at 12:06
Finally, I'm not sure if the `mask` solution would work if you need the border between images to have a colour, i.e. not transparent? — Oliver Joseph Ash, Oct 02 '20 at 12:10
this works just fine, but other solutions may be just as helpfull or better: https://jsfiddle.net/ytpn5h9r/ — Ramon de Vries, Oct 02 '20 at 12:15
@RamondeVries I am not interested in JS answers, but thank you! — Oliver Joseph Ash, Oct 02 '20 at 12:16
@TemaniAfif I appreciate your help but I feel quite offended with the way you're addressing me. I would encourage you to assume best intentions. — Oliver Joseph Ash, Oct 02 '20 at 12:17

CSS `z-index`: make list items appear beneath *previous* item

0 Answers0

CSS `z-index`: make list items appear beneath previous item