img div attribute css padding css-position

css - div - title html5



Posición absoluta que ignora el relleno de los padres (7)

¿Cómo se puede hacer que un elemento posicionado absoluto honre el relleno de su elemento primario? Quiero que un div interno se extienda por el ancho de su elemento primario y que se ubique en la parte inferior de ese elemento primario, básicamente un pie de página. Pero el niño tiene que honrar el relleno del padre y no está haciendo eso. El niño se presiona contra el borde del padre.

Entonces quiero esto

pero estoy obteniendo esto:

<html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div> </div> </body> </html>

Puedo hacer que suceda con un margen alrededor del div interno, pero preferiría no tener que agregar eso.

1.) no puede usar un borde grande en el elemento primario, en caso de que quiera tener un borde específico

2.) no puede agregar margen, en caso de que su padre sea parte de otro contenedor y desee que su padre tome el ancho total de ese padre principal.

La única solución que debería ser aplicable es envolver a sus hijos en otro contenedor para que sus padres se conviertan en abuelos y luego aplicar relleno a los nuevos contenedores / padres de los niños. O puede aplicar directamente el relleno a los niños.

En tu caso:

.css-sux{ padding: 0px 10px 10px 10px; }

Aquí está mi mejor oportunidad. Agregué otra div y la hice roja y cambié la altura de tus padres a 200px solo para probarla. La idea es que el niño ahora se convierte en el nieto y el padre se convierte en el abuelo. Entonces el padre respeta a su padre. Espero que entiendas mi idea.

<html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 200px;"> <div style="background-color: red; position: relative; height: 100%;"> <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div> </div> </div> </body> </html>

Editar:

Creo que lo que intentas hacer no se puede hacer. La posición absoluta significa que le vas a dar coordenadas que debe respetar. ¿Qué pasa si el padre tiene un relleno de 5px? Y coloca absolutamente al niño en la parte superior: -5px; izquierda: -5px . ¿Cómo se supone que honrar a los padres y a ti al mismo tiempo?

Mi solución

Si desea que honre a los padres, no lo coloque en absoluto en ese momento.

Bueno, esta puede no ser la solución más elegante (semánticamente), pero en algunos casos funcionará sin inconvenientes: en lugar de relleno, use un borde transparente en el elemento principal. Los elementos secundarios de posición absoluta respetarán el borde y se representará exactamente igual (excepto que está utilizando el borde del elemento principal para el diseño).

Podría haber hecho fácilmente usando un nivel extra de Div.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;"> <div style="background-color: gray;">css sux</div> </div> </div>

Demostración: https://jsfiddle.net/soxv3vr0/

Primero, veamos por qué está sucediendo esto.

La razón es que, sorprendentemente, cuando una caja tiene una position: absolute su caja contenedora es la caja de relleno de los padres (es decir, la caja alrededor de su relleno). Esto es sorprendente porque generalmente (es decir, cuando se utiliza el posicionamiento estático o relativo) el cuadro contenedor es el cuadro de contenido principal .

Aquí está la parte relevante de la especificación de CSS :

En el caso de que el ancestro sea un elemento en línea, el bloque contenedor es el cuadro delimitador alrededor de las cajas de relleno de la primera y la última caja en línea generadas para ese elemento ... De lo contrario, el bloque contenedor está formado por el borde de relleno de el ancestro

El enfoque más simple, como se sugiere en la respuesta de Winter, es usar padding: inherit en div completamente posicionado. Sin embargo, solo funciona si no desea que el div colocado por div tenga un relleno adicional propio. Creo que las soluciones más generales (en el sentido de que ambos elementos pueden tener su propio relleno independiente) son:

  1. Agregue un div adicional relativamente posicionado (sin relleno) alrededor de div posicionado. Ese nuevo div respetará el relleno de su padre, y el div completamente posicionado lo rellenará.

    La desventaja, por supuesto, es que estás jugando con el HTML simplemente para propósitos de presentación.

  2. Repita el relleno (o agréguelo) en el elemento absolutamente posicionado.

    La desventaja aquí es que tienes que repetir los valores en tu CSS, que es frágil si estás escribiendo el CSS directamente. Sin embargo, si está utilizando una herramienta de procesamiento previo como SASS o LESS , puede evitar ese problema utilizando una variable. Este es el método que uso personalmente.

Una cosa que podrías probar es usar el siguiente CSS:

.child-element { padding-left: inherit; padding-right: inherit; position: absolute; left: 0; right: 0; }

Permite que el elemento hijo herede el relleno del elemento principal, luego el elemento secundario se puede colocar para que coincida con el ancho y el relleno de los elementos principales.

Además, estoy usando box-sizing: border-box; para los elementos involucrados.

No he probado esto en todos los navegadores, pero parece estar funcionando en Chrome, Firefox e IE10.