Quiero saber como colocar elementos debajo de un div que dentro tiene otro div que sobresale por el borde inferior. Ya que este "hijo" cubre parte de lo que estoy colocando por debajo. El codigo html y Css es el siguiente:
<div class="col">
<div id="padre-banner">
<img id="banner" src="#" alt="baner-imagen">
<div id="padre-profile">
<img id="profile-pick" class="rounded-circle" src="profile-pick.png" alt="foto-de-perfil">
</div>
</div>
En Css:
#profile-pick{
width: 100%;
height: auto;
}
#padre-profile{
position: absolute;
top:78%;
left: 10%;
border-width: 0.3em black;
width: 20%;
background-color: orange;
}
#banner{
width: 100%;
height: auto;
border: solid;
border-width: 1px;
margin-top: 1em;
}
#padre-banner{
position: relative;
background-color: blue;
}
Como el contenedor de la imagen (padre-profile) sobresale por debajo de su contenedor padre (padre-banner). Cualquier texto que quiera poner por debajo de "padre-banner" aparece tapado por "padre-profile". Intente de varias maneras pero no encuentro una solución eficaz.