1

Estoy tratando de sobreponer un div que tiene un parafo y un boton sobre una imagen, pero lo que obtengo es que el div se queda debajo de la imagen o se sale.

¿Cómo puedo hacer para que el div con contenido se sobreponga de la imagen?

Contenedor con imagen: introducir la descripción de la imagen aquí

Contenedor sin imagen: introducir la descripción de la imagen aquí

Adjunto código:

.main__container{
    margin: 30px auto 30px auto;
    width: 1000px;
    height: 250px;
    border: solid 1px black;
}

.main__container img {
    position: absolute;
    width: 1000px;
    height: 250px;
}

.sobreposition{
    width: 200px;
    height: 200px;
    margin: 20px 0 30px 60px;
    border: solid 1px black;
}

.sobreposition p{
    text-align: center;
}

.sobreposition button{
    border: none;
    color: white;
    background-color: black;
    margin: 30px 90px 3px 55px;
    padding: 9px 30px 9px 30px;
}
<div class="main__container">

   <img src="https://markcoleman.org/wp-content/uploads/2017/06/tj-holowaychuk-61722-1000x250.jpg" alt="img">

   <div class="sobreposition">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione laudantium fuga suscipit quia, id corrupti.</p>
        <button>boton</button>
   </div>
</div>

2 respuestas 2

3

con position:absolute; pero siempre al colocar texto en una imagen debes agregar sombra para que se mas legible text-shadow: 2px 2px 3px #000;

ejemplo:

.main__container{
    margin: 30px auto 30px auto;
    width: 1000px;
    height: 250px;
    border: solid 1px black;
}

.main__container img {

    position: absolute;
    width: 1000px;
    height: 250px;
}

.sobreposition{
    position:absolute;
    width: 200px;
    height: 200px;
    margin: 20px 0 30px 60px;
    border: solid 1px black;
    box-shadow: 0px 0px 6px #000;
}

.sobreposition p{
    text-align: center;
    color: white;
    text-shadow: 2px 2px 3px #000;
}

.sobreposition button{
    border: none;
    color: white;
    background-color: black;
    margin: 30px 90px 3px 55px;
    padding: 9px 30px 9px 30px;
}
<div class="main__container">

        <img src="https://markcoleman.org/wp-content/uploads/2017/06/tj-holowaychuk-61722-1000x250.jpg" alt="img">

       <div class="sobreposition">

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione laudantium fuga suscipit quia, id corrupti.</p>

            <button>boton</button>
       </div>
</div>

1
  • Gracias John es justo lo que buscaba se agradece tu respuesta y gracias por el consejo lo tomare en cuenta. el 24 abr. 2022 a las 4:45
1

Una opción es poner la imagen como background en el css mediante background-image: url(""). Así:

.main__container{
    margin: 30px auto 30px auto;
    width: 1000px;
    height: 250px;
    border: solid 1px black;
    background-image: url("https://markcoleman.org/wp-content/uploads/2017/06/tj-holowaychuk-61722-1000x250.jpg");
}

.main__container img {
    position: absolute;
    width: 1000px;
    height: 250px;
}

.sobreposition{
    width: 200px;
    height: 200px;
    margin: 20px 0 30px 60px;
    border: solid 1px black;
    color: #FFF;
}

.sobreposition p{
    text-align: center;
}

.sobreposition button{
    border: none;
    color: white;
    background-color: black;
    margin: 30px 90px 3px 55px;
    padding: 9px 30px 9px 30px;
}
<div class="main__container">

   <div class="sobreposition">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione laudantium fuga suscipit quia, id corrupti.</p>
        <button>Botón</button>
   </div>
</div>

1
  • Mateo, funciona perfecto gracias. De mucha ayuda. el 24 abr. 2022 a las 4:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.