Is a non-nested div counted as a sibling when applying z-index?

Question

I have a background with text that needs to go above a line.

The parent element is position: relative. The line is position: absolute. The background is position: relative. The elements are in that order.

HTML

<div class="timeline">
  <div class="line"></div>
    <div class="section_text_bg_color mb-8">
      <div class="row">
         <div class="text WYSIWYG-styles text_container">...</div>
      </div>
    </div>
  <div class="container-fluid">...</div>
</div>

SCSS

.timeline {
  position: relative;
  z-index:1;

  .line {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    top: 0;
    left: 50%;
    background-color: $primary-color-2;
    z-index: -1;

    @include media-breakpoint-down(sm) {
      display: none;
    }
  }

  .section_text_bg_color {
    position: relative;
    padding: 40px;
    margin-top: 0;
    z-index: 3;
  }

  #first.section_text_bg_color {
    margin-top: -80px;

    @include media-breakpoint-down(sm) {
      margin-top: 0;
    }
  }

The line and background are siblings of the timeline element.

Based on this post, I have to set the parent to z-index:1, the line to z-index:-1, and section_text_bg_color to z-index: 3. If I remove the parent z-index the line will go behind the parent div.

If my understanding is correct, I created a stacking order in the parent element, but am only asking for one of the siblings to be above another, not a child above its parent.

I don't see what the issue is here.

Any help is appreciated.