Z-index calculations

Attempt to reverse z-index stacking order in CSS, using CSS counters and attrs. Neither works (yet) in calc operations, at least in Chrome.

HTML

<ul>
    <li class="sticky" i=1>One</li>
    <li class="sticky" i=2>Two</li>
    <li class="sticky" i=3>Three</li>
    <li class="sticky" i=4>Four</li>
    <li class="sticky" i=5>Five</li>
</ul>

CSS

ul {
    list-style: none;
    position: relative;
    padding: 10px;
    
    counter-reset: item;
}
li {
    display: inline-block;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 0 -10px;
    
    counter-increment: item;
    
    z-index: counter(item); /* nope */
}

li:after {
    /* verify attr and counter have expected values */
    display: block;
    content: ' a:' attr(i) ', c:' counter(item);
}

JavaScript

const headers = document.getElementsByClassName("sticky");
console.log
for (var header of headers) {
  header.style.zIndex += 1;
}