Tengo un contenedor principal div con posicionamiento relativo. Dentro del div tengo un bloque de texto y una imagen. El bloque de texto tiene un posicionamiento absoluto para superponerse a la imagen y la imagen en sí tiene un ajuste de objeto: cubierta.
<div class="landing-cms-grid-content"> <img src="....." /> <div class="landing-cms-grid-content-wrapper"> <div class="landing-cms-grid-subtitle"> Lorem Ipsum </div> <a href="#" class="btn btn-block btn-buy"> Shop now </a> </div> </div>Cuando doy a mi .landing-cms-grid-content-wrapper relleno superior e inferior, no se suma a la altura del landing-cms-grid-wrapper. ¿Es posible incluir rellenos/márgenes de elementos secundarios posicionados de forma absoluta en el cálculo de la altura de los contenedores principales?
Saludos, Álex
Respuesta rápida, no. Un elemento de posición absoluta se coloca en relación con el ancestro más cercano, en este caso es el elemento al que está intentando aplicar el relleno y no tendrá en cuenta los atributos del modelo de caja de su relleno. Sin embargo, puede lograr el mismo efecto tomando la medida de su relleno que desea aplicar y, en su lugar, aplicarlo al espacio relativo del elemento posicionado absoluto. P.ej; padding-top: 1rem en el ancestro padre relativo se convierte en top: 1rem del hijo posicionado absoluto.