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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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