在一系列每个都有负边距的项目中，如何使每个项目都显示在上一个项目的下方？

Question

根据项目设计，我需要显示一系列项目，每个项目都部分显示在下一个项目之上。

使用负边距，我可以做到这一点：

唯一的问题是：每个新项目都在前一个项目的上方，而我想相反。

如何？

注意：项数未知（它们来自API）。项目的顺序很重要。

Codepen

.container {
    display: flex;
}

.item {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid black;
    background: yellow;
    margin-right: -8px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Answer 1

如果您可以反转项目的顺序，则可以执行以下操作：

Flexbox

.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如果您不需要flexbox，可以执行以下操作：

表格

.container {
  display: table;
}

.item {
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

使用z-index属性，在顶部使用大数字。

.item1 {
    z-index: 3;
}
.item2 {
    z-index: 2;
}
.item3 {
    z-index: 1;
}

由于项目的数量未知，请直接在每个元素上分配样式属性。

Answer 3

有点笨拙，但您可以通过翻转和反转它们来做一些弹性魔术。您所需要做的就是将容器css更改为以下内容。

.container {
  display: flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
}

.item {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
  order:-1
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 4

完全CSS，尊重元素顺序，无JS或Z-index体操

我还没有看到实际的设计，所以不确定它是否可以这样工作。但是由于顺序很重要（不仅仅是装饰），所以这是一种处理方式。

不幸的是，此解决方案确实需要添加其他元素并知道尺寸（例如，如果是垂直重叠和全宽，则不需要尺寸）

基本上，我们使用的是烟雾和镜子...想法是将所有内容放入overflow: hidden放在容器中，然后在顶部添加另一个元素，并放置在上面以便溢出将其隐藏。 ：-）

.container {
  display: flex;
  margin-bottom: 30px;
}

.item {
  position: relative;
  overflow: hidden;
  margin: 0 0 0 -10px;
  padding: 0;
}
.item span {
  display:block;
  width: 50px;
  height: 50px;
  border-radius:50%;
  border: 1px solid black;
  background: yellow;


  text-align: center;
  line-height: 50px;
}

.item:before {
  content: '';
  position: absolute;
  top: 0;
  left: -42px;
  width: 50px;
  height: 50px;
  border-radius:50%;
  border: 1px solid black;
  background: aqua;
  z-index: 10;
}
.item:first-child {
  margin-left:0;
}
.item:first-child:before {
  display:none;
}

.example2 .item:before{
  background: yellow;
}

<div class="container">
  <div class="item"><span>A</span></div>
  <div class="item"><span>B</span></div>
  <div class="item"><span>C</span></div>
</div>

<div class="container example2">
  <div class="item"><span>A</span></div>
  <div class="item"><span>B</span></div>
  <div class="item"><span>C</span></div>
  <div class="item"><span>D</span></div>
  <div class="item"><span>E</span></div>
  <div class="item"><span>F</span></div>
  <div class="item"><span>G</span></div>
</div>

在这种情况下，算术有点差，因为1px的边框使总宽度增加了2px ...

Answer 5

需要一些JS的帮助...将position: relative;添加到.item类中，这应该可以工作：

const items = document.querySelectorAll('.item');

if (items) {
  let z = items.length;

  items.forEach((item) => {
    item.style.zIndex = z;
    z--;
  });
}

.container {
  display: flex;
}

.item {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>