html - que - CSS: posicionar el elemento anidado ligeramente fuera de los límites del elemento padre

selectores avanzados css

Question

Tengo 2 divs, uno anidado dentro del otro. De acuerdo con el diseño de la página, la división anidada debe aparecer como "superior a" la división principal, como en:

Tengo el código CSS codificado para ambos elementos, utilizando un margen superior negativo en la división anidada para intentar simular el efecto deseado. Sin embargo, en lugar de aparecer fuera de los límites de los padres, los 10px más o menos del div anidado se cortan, como en:

No quiero posicionar el elemento absolutamente, porque un objetivo para esta página es que sea receptivo.

HTML para divs:

<div class="container-div">
<div class="child-div">
...
</div>
</div>

CSS para los divs:

.container-div {
padding: 10px 10px 0;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
margin: -15px 10px 0;
border: 1px solid #efefef;
background-color: #fff;
}

Answer 1

No es necesario aplicar position:absolute a la división anidada.

Y el margin probablemente no sería la mejor práctica en este caso.

Solo agrega position:relative al div anidado, y configúralo con el número que quieras. En tu caso, probablemente sería negativo.

Echa un vistazo a este violín.

Answer 2

overflow: hidden en el padre lo habría hecho perfectamente!