Tengo un sitio web bastante simple adjunto a continuación. Al pasar el cursor sobre una palabra subrayada, hay una imagen que aparece justo en la posición de la palabra.
Se supone que las imágenes deben estar siempre en la parte superior, pase lo que pase. Pero las palabras subrayadas siguen apareciendo encima de las imágenes. (Ver fragmento de código). ¡Sé que debe haber algo conflictivo en el orden de mis elementos! Por favor ayuda, soy un maldito principiante.
He intentado establecer un índice Z, pero eso no funciona en absoluto.
¡Espero que entiendas mi problema aquí!
@charset "UTF-8"; /* CSS Document */ html, body { margin: 0; background-color: black; } #wrapper { margin: 0; position: fixed; width: 100%; height: 100%; overflow: scroll; } .section { width: 100%; height: 100%; display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center; text-align: left; position: relative; } p { color: white; font-family: Helvetica, sans-serif; font-size: 36px; margin-left: 100px; margin-right: 100px; text-align: left; display: block; } .gallery-image { position: absolute; display: none; transform: translate(0,calc(1em - 50%)); max-width: 50vw; max-height: 75vh; height: auto; } .gallery-link { position: relative; text-decoration: underline; } .gallery-link:hover > .gallery-image{ display: flex; } <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div class="section"> <p>Title<br> Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain <span class="gallery-link"><img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" > vulnerability </span> of any.<br> The once <span class="gallery-link">colorful rug<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamentglas_B_-_Ansicht_1.jpg/1000px-Ornamentglas_B_-_Ansicht_1.jpg"></span> has been <span class="gallery-link">broken down<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/CocooningⓒShin%2C_Kyungsub.jpg" ></span> but is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain.<br> End Quote </p> </div> </div> </body> </html> @charset "UTF-8"; /* CSS Document */ html, body { margin: 0; background-color: black; } #wrapper { margin: 0; position: fixed; width: 100%; height: 100%; overflow: scroll; } .section { width: 100%; height: 100%; display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center; text-align: left; position: relative; } p { color: white; font-family: Helvetica, sans-serif; font-size: 36px; margin-left: 100px; margin-right: 100px; text-align: left; display: block; } .gallery-image { position: absolute; display: none; transform: translate(0,calc(1em - 50%)); max-width: 50vw; max-height: 75vh; height: auto; z-index: 1000; } .gallery-link { position: relative; text-decoration: underline; } .gallery-link:hover > .gallery-image{ display: flex; z-index: 1000; } <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div class="section"> <p>Title<br> Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain <span class="gallery-link"><img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" > vulnerability </span> of any.<br> The once <span class="gallery-link">colorful rug<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamentglas_B_-_Ansicht_1.jpg/1000px-Ornamentglas_B_-_Ansicht_1.jpg"></span> has been <span class="gallery-link">broken down<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/CocooningⓒShin%2C_Kyungsub.jpg" ></span> but is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain.<br> End Quote </p> </div> </div> </body> </html>.gallery-image { position: fixed; display: none; transform: translate(0,calc(1em - 50%)); max-width: 50vw; max-height: 75vh; height: auto; } .gallery-link { text-decoration: underline; } .gallery-link:hover > .gallery-image{ display: flex; }