堆叠div而不给出z-index

Question

我想使用margin-right：-10px将多个tile div重叠在一起。

我希望之前的div出现在顶部，并且新的兄弟div出现在它之后。实际上，前一个div将与较新的div重叠。通过在float: right元素上使用tile并撤消订单，可以轻松解决此问题。

但是这个解决方案打破了我的另一个要求。也就是说，在same课程后选择第一个another课程。

.another + .same {
 outline: 1px solid red;
}

有没有办法在不使用绝对位置或z-index的情况下重叠div。这些图块是动态添加的，因此添加z-index意味着我必须使用javascript来完成它，我想避免使用。

＆＃13;

＆＃13;

.tile {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: -10px;
  border: 2px solid white;
  border-radius: 100%;
}

.a {
  background-color: yellow;
}

.b {
  background-color: pink;
}

.c {
  background-color: turquoise;
}

.d {
  background-color: grey;
}

.containerA {
  margin-bottom: 30px;
  width: 150px;
  text-align: center;
}

.containerB {
  width: 150px;
}

.containerB .tile {
  float: right;
}

.another + .same {
  outline: 1px solid red;
}

＆＃13;

<div class="containerA">
<div>
Normal
</div>
  <div class="tile a another">
  </div>
  <div class="tile b another">
  </div>
  <div class="tile c same">
  </div>
  <div class="tile d same">
  </div>
</div>

<div class="containerB">
<div>
Expected outcome with float right but sibling selector broken
</div>
  <div class="tile d same">
  </div>
  <div class="tile c same">
  </div>
  <div class="tile b another">
  </div>
  <div class="tile a another">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

小提琴 - https://jsfiddle.net/be51xxku/2/

Answer 1

一个想法是更改元素的CSS以直观地创建此效果。

这是一个使用径向渐变而不是背景颜色的示例。我还使用变量使其易于处理：

＆＃13;

＆＃13;

:root {
  --back-color: #fff;
}

.tile {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 100%;
  margin-right: -15px;
  background: radial-gradient(circle at left, transparent 15px, var(--back-color) 16px);
}

.a {
  background: yellow
}

.b {
  --back-color: pink;
}

.c {
  --back-color: turquoise;
}

.d {
  --back-color: grey;
}

.containerA {
  margin-bottom: 30px;
  width: 150px;
  text-align: center;
}

.containerB {
  width: 150px;
}

.containerB .tile {
  float: right;
}

.another+.same {
  position: relative;
  outline: 1px solid red;
  z-index: -1;
}

＆＃13;

<div class="containerA">
  <div>
    Normal
  </div>
  <div class="tile a another">
  </div>
  <div class="tile b another">
  </div>
  <div class="tile c same">
  </div>
  <div class="tile d same">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;