0
178
Vistas¿Cómo evito que los elementos con posición absoluta se desborden?
He adjuntado un fragmento de código simple para un sitio web. Al pasar el cursor sobre las palabras subrayadas, se supone que aparecen imágenes. ¿Cómo puedo evitar que esas imágenes "salten" de su contenedor para que siempre estén visibles y no se salgan de la pantalla?
Se supone que las imágenes aparecen en la posición de la palabra correspondiente.
Espero que entiendas el problema que he descrito 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; width: 50%; } .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>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede intentar modificar su .gallery-image con top y eliminar transform también. Tu CSS final será así
.gallery-image { position: absolute; display: none; max-width: 50vw; max-height: 75vh; height: auto; z-index: 1000; top: 100%; /*Here is the main change*/ }Puede consultar la caja de arena aquí https://jsfiddle.net/kqoh2Lat/
El resultado final
·
Juan Pablo Isaza
Denunciar
Responde la pregunta