Así que tengo esta página: Imagen de la página Se supone que las líneas de la izquierda están detrás (o encima, no me importa) del cuadro de texto. Las líneas van hasta la parte superior de la página cuando subo su índice z, por lo que no estoy seguro de cómo el div logra cubrirlas cuando su tamaño es solo el del cuadro rojo.
La sección html del cuerpo es lo que está causando mi problema. Vea la respuesta a continuación para lo que realmente quiero que suceda. La cuestión es que no puedo eliminar eso sin que mi barra de navegación no se coloque en el lugar correcto de la pantalla.
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>Actualizado por comentario:
.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>