0
221
VisualizaçõesSuperposición de div de imagen y posición preservada durante el cambio de tamaño
Estoy colocando un div encima de una imagen receptiva, como esta: 
Cuando cambio el tamaño, pierdo la posición de la etiqueta div, así: 
¿Cómo puedo cambiar el tamaño de este div superpuesto para que su tamaño se redimensione proporcionalmente y se mantenga su posición cuando cambia el tamaño de la pantalla?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Envuelva la imagen en un contenedor con ancho de porcentaje y cree un cuadrado usando porcentaje y valor de relleno. Después de eso, alinee el cuadrado usando la position: absolute y porcentual.
.container { position: relative; } .lotus-image { width: 100%; } .box { position: absolute; top: 30%; right: 20%; width: 30%; padding-bottom: 30%; border: 4px solid red; color: white; } .box-content { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } <div class="container"> <img src = "https://img.freepik.com/free-photo/blossoming-pink-lily-flowers-swamp-natural-background_548832-3024.jpg?size=626&ext=jpg" class="lotus-image" /> <div class="box"> <div class="box-content"> <span>Hello</span> </div> </div> </div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta