I am looking to stack multiple tile divs on top of each other by using negative margin-right: -10px.
My goal is to have the previous div displayed on top, with new sibling divs appearing below it. Currently, the newer div overlaps the previous one. While this can be easily fixed by applying float: right to the tile element and reversing the order, it conflicts with another requirement I have - selecting the first same class after an instance of another class.
.another + .same {
outline: 1px solid red;
}
Is there a way to achieve the stacking effect without resorting to absolute positioning or z-index? Since these tiles are dynamically added, I prefer to avoid using JavaScript to handle z-index adjustments.
.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;
}<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>Fiddle - https://jsfiddle.net/be51xxku/2/