CSS`z-index`：使列表项显示在* previous *项目下方

问题描述

我有一个略有重叠的项目清单。此列表中元素的堆叠顺序应如下：第一个元素应显示在顶部，最后一个元素应显示在底部。

结果应如下所示：

这是我的第一次尝试，但是重叠发生在错误的方向：

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>

我了解这是因为默认的z-index行为遵循DOM元素的顺序：出现在DOM后面的元素将出现在元素之前。

一种解决方法是手动将唯一的z-index应用于每个列表项，但是如果列表的长度（项目数）是动态的，则无法缩放。

Another workaround would be to use flex-direction: row-reverse，但项目顺序错误。我们可以通过更改DOM顺序来解决此问题，但这会破坏HTML语义。

我想知道是否有一种解决方案，（1）适用于所有列表大小，（2）不需要更改DOM / HTML中元素的顺序。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html z-index