Relatively positioned <div> preventing absolutely positioned elements from displaying with no-CodePudding

So I have this page: Image of page the lines on the left are supposed to be behind (or on top of, I don't care) the text box. The lines go all the way to the top of the page when I turn up their z-index, so I am not sure how the div manages to cover them up when its size is only that of the red box.

The html, body section is what is causing my problem. See the answer below for what I actually want to happen. The thing is, I can not remove that without it making my navigation bar not sit in the right spot on the screen.

        html, body {
    margin: 0;
    padding: 0;
    background-color: #e7e3d7;
  }

    .headerLarge {
        padding-top: 1.5rem;
        padding-bottom: 0px;
        font-size: 2rem;
        text-align: center;
        width: 50%;
        background-color: red;
      
      }
      
      .spine {
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: -15px;
        left: 50%;
        border-left: 20px solid #cdcabf;
      }
    
      .page {
        position: absolute;
        top: 0;
        bottom: -15;
        z-index: -1;
        height: 100%;
        border-left: 4px solid #cdbfbf;
        
      }

 <span  style="left: 0px; top: 0;"></span>
    <span  style="left: 10px;"></span>
    <span  style="left: 20px;"></span>
    
    <span ></span>
    
    <span  style="right: 0px;"></span>
    <span  style="right: 10px;"></span>
    <span  style="right: 20px;"></span>
    
    <span class='headerLarge'>Doodle of the Day!</span>

CodePudding user response：

Updated per comment:

.headerLarge {
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 0px;
  margin: 0 16px;
  font-size: 2rem;
  text-align: center;
  width: 50%;
  background-color: red;
}

.spine {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -15px;
  left: 50%;
  border-left: 20px solid #cdcabf;
}

.page {
  position: absolute;
  top: 0;
  bottom: -15;
  z-index: -1;
  height: 100%;
  border-left: 4px solid #cdbfbf;
}

<span  style="left: 0px; top: 0;"></span>
<span  style="left: 10px;"></span>
<span  style="left: 20px;"></span>

<span ></span>

<span  style="right: 0px;"></span>
<span  style="right: 10px;"></span>
<span  style="right: 20px;"></span>

<span class='headerLarge'>Doodle of the Day!</span>

CodePudding user response：

Eventually just decided to rework the page using flex layouts at the suggestion of @AStombaugh as this was really just a mess. I feel it was the right choice. Thanks!