Relatively positioned <div> preventing absolutely positioned elements from displaying with no apparent overlap

user_19164051 0
Viewed 74

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 class="page" style="left: 0px; top: 0;"></span>
    <span class="page" style="left: 10px;"></span>
    <span class="page" style="left: 20px;"></span>
    
    <span class="spine"></span>
    
    <span class="page" style="right: 0px;"></span>
    <span class="page" style="right: 10px;"></span>
    <span class="page" style="right: 20px;"></span>
    
    <span class='headerLarge'>Doodle of the Day!</span>

css html javascript
1 Answers

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 class="page" style="left: 0px; top: 0;"></span>
<span class="page" style="left: 10px;"></span>
<span class="page" style="left: 20px;"></span>

<span class="spine"></span>

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

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

user_85650100
Related