Recently, I encountered a strange issue on my webpage: Image of page The lines on the left side are supposed to be displayed behind or on top of the text box. However, when I increase their z-index, the lines extend all the way to the top of the page and get covered up by the div, despite its size being limited to that of the red box.
The problem lies within the html and body sections of my code. Removing them would disrupt the positioning of my navigation bar on the screen. To achieve the desired effect, please refer to the answer provided below.
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>