JSFiddle - React, Tailwind, and code Playground

HTML

<h2> Default Behavior:</h2>
<div class="container1">
    <div class="floater">Item 1</div>
    <div class="floater">Item 2</div>
    <div class="floater">Item 3</div>
    <div class="floater">Item 4</div>
    <div class="floater">Item 5</div>
    <div class="floater">Item 6</div>
</div>
<h2> Desired Behavior:</h2>
<div class="container2">
    <div class="floater">Item 1</div>
    <div class="floater">Item 2</div>
    <div class="floater">Item 3</div>
    <div class="floater">Item 4</div>
    <div class="floater">Item 5</div>
    <div class="floater">Item 6</div>
</div>

<h3>Can this work for an <i>arbitrary</i> number of items using css alone?</h3>

CSS

.container1 {
    border: 3px solid orange;
    padding: 2em;
    display: inline-block;
}

.container2 {
    border: 3px solid teal;
    padding: 2em;
    display:inline-block
}

.container2 .floater:nth-child(0) {
    z-index: 6;
}

.container2 .floater:nth-child(1) {
    z-index: 5;
}

.container2 .floater:nth-child(2) {
    z-index: 4;
}

.container2 .floater:nth-child(3) {
    z-index: 3;
}

.container2 .floater:nth-child(4) {
    z-index: 2;
}

.container2 .floater:nth-child(5) {
    z-index: 1;
}

.floater {
    border: 1px solid gray;
    background: #444;
    color: white;
    float: left;
    padding: 1em;
    margin: -1em;
    position: relative;
}