Always show absolutely position divs on top of parents siblings

Question

I have a div with a dynamic number of rows inside. Each row has an absolutely positioned tooltip that triggers on hover. The absolutely positioned tooltips are covered by the parent's following siblings.

Here is a simple reproduction of the issue:

.row-containers {
  height: 250px;
  width: 600px;
  border: solid 1px gray;
}

.row {
  width: 100%;
  height: 25px;
  position: relative;
  z-index: 5;
}

.row:nth-child(odd) {background: #DDD}

.row:nth-child(even) {background: white}

.tooltip {
  height: 50px;
  padding: 5px;
  background: seagreen;
  position: absolute;
  top: 10px;
  left: 10px;
}

<div class="row-containers">
  <div class="row">
    <div class="tooltip">
    Hello I am hidden from view by my parent's siblings.
    </div>
  </div>
  <div class="row">
    <div class="tooltip">
    Hello I am hidden from view by my parent's siblings.
    </div>
  </div>
  <div class="row">
    <div class="tooltip">
    Hello I am hidden from view by my parent's siblings.
    </div>
  </div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

Why this happens is known: later siblings take higher precedence over the children of earlier siblings, regardless of z-index/absolute positioning.

In a similar question where only one absolutely positioned div needed to take priority, the easy solution was to give the parent a z-index value.

But in my case, every single row and its siblings have an absolutely positioned div that needs to show. Giving every row a z-index value is not a very elegant solution, as they would each need a different z index. It would entail something along the lines of dynamically adding descending Z-values using javascript.

Is there a way to have all the absolute position divs show up on top of their parent's siblings using only html/css?