soy Kseso y esto EsCSS

El valor 'auto' en Css y la disparidad de significados en las propiedades de situación, tamaños y z-index

Qué significa y como se resuelve el valor 'auto' declarado a las propiedades CSS z-index, de situación, tamaños y márgenes según sea el bloque de contención generado por el elemento.

El valor 'auto' en Css y la disparidad de significados en las propiedades de situación, tamaños y z-index

·Por Kseso ✎ 8
el valor auto de Css y sus múltiples significado

Dentro de las 'palabra clave' usadas en Css como valor de muchas propiedades está el término 'auto'. Y el valor 'auto', a diferencia de otros, no tiene un significado único. Esto es, que dependiendo de la propiedad a la que se declare, el resultado final puede ser muy diferente al esperado. Es tal su disparidad de significados que ni en el último documento sobre los valores y unidades Css está definido.

Y esta diferencia entre lo obtenido (mostrado por el navegador) respecto a lo esperado suele ser porque hay ocasiones que el significado del valor 'auto' es poco intuitivo. Tanto que a veces hasta parece haber colisión con la lógica. Bueno, con "nuestra lógica".

Estos resultados inesperados unas veces y aparentemente dispares otras del valor computado (aplicado) de 'auto' es debido a que dicho valor final es dependiente del valor de otras propiedades Css. Valor que puede estar presente por cualquiera de las vías: por declaración expresa o por efecto de la herencia.

Para no hacer tedioso y pesado el artículo, vamos a centrarnos en el valor 'auto' en los tamaños (anchura y altura) y en los valores de las propiedades de posicionamiento (left / right / top / bottom) así como en la propiedad z-index.

Z-index: auto

La propiedad z-index sólo admite valores numéricos (enteros y sin unidad) positivos y negativos además de la palabra clave 'auto'.

Como ya deberías saber, y si no es así te recomiendo la lectura del artículo Z-index en Css: el apilamiento de cajas y sus valores negativos, toda caja que tiene declarado cualquier valor para la propiedad z-index crea una capa de contención para el apilamiento vertical (eje z) para él y todo su contenido.

Y cómo se interpreta z-index: auto?:
El elemento al que se declara z-index: auto no establece un nuevo contexto de pila. Su capa de apilamiento en la vertical y la de su contenido es la misma que tenga su caja padre.

El valor 'auto' en las propiedades de situación en elementos posicionados de forma absoluta

Entendiendo como propiedades de situación las propiedades top / bottom / left / right. Y por elementos posicionados aquellos que tienen como valor de la propiedad 'position' uno distinto a 'static' que es a los que se pueden declarar de forma efectiva.

Las propiedades de situación lo que hacen es desplazar las cajas del lugar que le corresponde tanto como el valor indicado. [Ver nota 1]

La cuestión, y motivo de sorpresa en algunos casos, es qué punto se toma como referente (el que le correspondería) para dicho desplazamiento. Especialmente puede resultar confuso en las cajas con position: absolute.

Position: absolute + situadas != auto

Porque si se declara algún valor distinto de 'auto' en alguna de las parejas de las propiedades de situación vemos que la caja 'absolute' toma como referente la esquina correspondiente de su ancestro más próximo que esté posicionado. Así el par de declaraciones top: 0; left: 0; la situará en la esquina superior izquierda de su ancestro. Sin importar dónde o cuándo aparece en el DOM. Y si el valor es cualquier valor numérico (más la unidad obligada) tomará como referente (coordenada 0,0) su esquina correspondiente.

Son las cajas A-0) y A-01) del pen del ejemplo (está un poco más abajo en este artículo)

Position: absolute + situadas = auto

La aparente disparidad de comportamiento se aprecia cuando el elemento está declarado como position: absolute y en las propiedades de situación usamos el valor 'auto'. Que es el valor por defecto.

La regla para entender el comportamiento en este caso del valor 'auto' es sencilla: 'auto' significa que la caja generada se colocará en el lugar que le correspondería ocupar según el flujo natural del documento antes de aplicar la declaración 'position: absolute'. La coordenada 0,0 coincide con la esquina superior izquierda de la caja generada para el content-box

Así y como ejemplo, si el padre (posicionado) tiene un 'padding' de 20px y a su hijo lo posicionamos con left: auto,; top: auto y es el primer contenido del padre (no hay nada más antes que él) se colocará a 20px de su borde izquierdo y a 20px del superior. Y este comportamiento no cambia aunque las declaradas con 'auto' sean las otras 2 propiedades de este grupo, tres de ellas o las cuatro.

Ver caja A-1) del pen de ejemplo.

Pero si el mismo hijo del ejemplo del párrafo anterior tiene (en el html) algún hermano antes que él (como en la caja A-2) del pen) tu 'top: auto' se computa, y por lo tanto es dibujado, después o por debajo (eje y) de su hermano. Esto es, en el lugar que le correspondería de no estar como 'absolute'.

Nota 1: Las propiedades de situación también pueden ser utilizadas para definir el tamaño de los elementos posicionados al declarar al menos 3 de ellas con valor distinto a 'auto'.

See the Pen KIELi by Kseso (@Kseso) on CodePen

El valor 'auto' en tamaños y márgenes según sea el bloque de contención

El significado del valor 'auto' (o el valor final computado) en la anchura y altura de un elemento es dependiente de qué tipo de bloque de contención genera.

Un recordatorio al respecto de los diferentes bloques de contención generados: o qué tipo de elementos hay según sean éstos:

  1. Elementos en el flujo normal del documento, ya sean reemplazados o no reemplazados, de línea o de bloque
  2. Elementos fuera del flujo (flotantes o posición absoluta), ya sean reemplazados o no reemplazados. Todos de bloque

Los elementos reemplazados son aquellos considerados vacíos de contenido y que al interpretar el navegador el documento lo que muestra es un valor de ese elemento. Por ejemplo el elemento 'img'. Lo mostrado es el valor del atributo 'src'. El elemento 'img' es reemplazado por el valor del atributo.

El valor 'auto' en tamaños y márgenes

Elementos no reemplazados y de línea
Como un 'span', por ejemplo:
La propiedad 'width no se aplica. Por lo tanto no tiene sentido el valor 'auto'. La anchura es la de su contenido y la altura la marca la propiedad 'line-height'
En las propiedades de colocación el valor 'auto' es equivalente a '0' y el resultado es que el elemento no se desplaza respecto a la posición que le corresponde ocupar por su lugar en el flujo del documento.
Elementos reemplazados de línea
Como una imagen:
El valor 'auto' en los tamaños se computa como el valor intrínseco del elemento.
El valor 'auto' tanto en las propiedades de colocación como en los márgenes computa como '0'. No hay desplazamiento
Elementos reemplazados en flujo normal, a nivel de bloque
El valor 'auto' en los tamaños se computa como el valor intrínseco del elemento.
El valor 'auto' en las propiedades de colocación computa como '0'. Sin desplazamiento
El valor 'auto' en los márgenes laterales reparte por igual el espacio lateral sobrante de su padre. Centra en la horizontal al hijo. Y si no hay ese espacio sobrante (la anchura del hijo es igual o mayor que la de su padre) computa como '0'.
Elementos no reemplazados en flujo normal a nivel de bloque
El valor 'auto' en la anchura computa como todo el espacio disponible de la anchura del padre. Esto es, se expande para ocupar toda la anchura del padre pero haciendo hueco para los bordes y paddings laterales.
Con valor 'auto' la altura queda definida por el contenido.
'auto' en las propiedades de situación computa como '0' (figuras B-0 y B-1 del pen.
Márgenes laterales en 'auto' centra la caja si hay espacio sobrante en el padre (width declarado != 'auto' y menor al 100% del padre).
Elementos no reemplazados, flotantes
Si los márgenes y las propiedades de situación son especificados como 'auto', su valor computado es '0'.
Por lo tanto su tamaño final depende de su contenido y la altura de la propiedad 'line-height'
Elementos reemplazados, flotantes
Si los márgenes y las propiedades de situación son especificados como 'auto', su valor computado es '0'.
Si 'width' y 'height' son 'auto', su valor es el ancho y alto intrínseco del elemento.
Elementos reemplazados y no reemplazados, posicionados absolutamente
El valor 'auto' en las propiedades de situación son las vistas en el segundo punto del artículo (antes del pen de ejemplo).
El valor 'auto' en los márgenes laterales computa como '0'.
El valor 'auto' en los tamaños: la intrínseca en los reemplazados y '0' (las resuelve el contenido) en los no reemplazados.

Algunos de estos casos están recogidos en el segundo grupo del pen de ejemplo. Así como la diferencia entre el valor 'auto' y '100% en los tamaños de las cajas (propiedades 'width' y 'height').

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso