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').

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 Don Kseso Kseso

Comentarios: 8

  1. Estos artículos son los que le pasan desapercibidos a los improvisados, pero que abren más posibilidades a quienes realmente queremos aprender.
    Aprovecho a hacer 2 offtopic ahora, así dejo el espacio libre por si alguien quiere aportar en serio. Lo de 'auto' suele confundir a muchos; sigo encontrando gente que (p.e.) esta covencida de que en los márgenes laterales sirve para centrar, que es una especie de 'center'. Y en verdad es un 'me_comporto_de_la_mejor_manera_posible_segun_el_caso'.
    Lo aclaraste muy bien al decir "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'."
    Para algún diseñador sería lógico que si "centra" un bloque dentro de otro, al superar el primero el tamaño del segundo, se siga manteniendo centrado. ¡Pero eso ocultaría el inicio de contenido si hay 'overflow:hidden'!. Aunque usáramos un 'scroll' o (Je) 'auto', habría que moverse siempre al principio para leerlo ... y comprenderlo.
    Esto va en contra de la usabilidad, que es lo primero en una página web, por encima del diseño. Justamente es algo que se nota en el 'overflow:auto': no muestra las barras, pero si se vuelven necesarias para ver un contenido, entonces aparecen.

    El segundo offtopic es porque me divirtió mucho que usaras como imagen a la auto…mata de María Antonieta, que no es una barbie de ella pero dicen que la peluca la hicieron con su cabello.
    Esta "Intérprete de címbalo" fue creada a fines del sXVIII por el relojero Pierre Kintzing y el ebanista David Roentgen, y no tenía más de 50cm de altura. Toda cajita de música alguna vez soñó con ser como ella, que podía tocar 8 melodías compuestas especialmente para sus conciertos.

    ResponderEliminar
  2. Hola, después de que me distes el enlace hace unos días de este artículo sobre el valor 'auto' en Css y la disparidad de significados en las propiedades de situación, tamaños y z-index y después de estudiarlo detenidamente me han surgido algunas dudas sobre algunas cosas y algunos términos. Si puedes aclarármelo un poco.

    1ª pregunta:

    En el artículo, en concreto en donde pone “nota 1” haces mención a la siguiente frase, pero no especificas a que valor de posición se refiere, si es al relative, absolute. Haciendo pruebas en el navegador al posicionar un elemento con absolute y ponerpor ejemplo left: 50px y rigth:50px se puede ver que como bien dices define el tamaño del elemento, pero he probado con position relative y no pasa nada. Es por eso que he sacado la conclusión que es al posicionamiento absoluto. También comentas que se tiene que declarar al menos 3 de ellas con valor distinto a 'auto'. Si me remito al ejemplo que te puse ahora y pruebas que he hecho se puede ver que con dos valores por ejemplo left y rigth se consigue un width. Me imagino entonces que con 2 valores suficiente, ero en el artuculo pone 3.

    Frase:

    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'.

    2ª pregunta:

    En el articulo nombras la palabra “colocación”, ha qué propiedad te refieres. Las propiedades de situación dijiste que a las propiedades top / bottom / left / right, pero la de colocación la empiezas a nombrar a partir del apartado “El valor 'auto' en tamaños y márgenes según sea el bloque de contención” y no se ha cual te refieres.

    gracias

    ResponderEliminar
  3. pd: me falto la pregunta 3

    Pregunta 3:

    En el apartado a continuación pone esto tambien:

    "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'

    Esto a que se aplica a elementos reemplazados que sean flotantes, o por un lado a elementos reemplazados y por otro a flotantes. Lo digo porque si te fijas pone "Si los márgenes y las propiedades de situación son especificados como 'auto...'" que yo sepa en los flotante (float) no se puede poner propiedades de situación.

    Se que son unas cuantas preguntas, pero algunas cosas dan lugar a confusiones por lo menos para mi

    ResponderEliminar
    Respuestas
    1. "Se que son unas cuantas preguntas, pero algunas cosas dan lugar a confusiones por lo menos para mi"

      Ya me gustaría tener todo el tiempo que requeriría aclararte todas y cada una de las dudas que puedan irte surgiendo en la profundidad y detalle que me planteas, pero me resulta materialmente imposible.
      Mi sugerencia para aclarar todo aquello de este blog que te de lugar a confusiones (con independencia que sea por estar redactado confusamente o incluso por ser "no conforme a la especificación") es que te dirijas a la fuente original: el documento del W3c donde se desarrolla.

      Así que permíteme que sea un tanto rápido y escueto en la respuesta:

      [1]"no especificas a que valor de posición se refiere, si es al relative, absolute"
      A absolute (y fixed es un absolute con particularidades).
      Por "elementos posicionados" se suele entender aquellos que salen del flujo mediante la propiedad position.
      3 valores para dotarlos de tamaño (anchura y altura)

      [2] Colocación, situación, ubicación... y cualquier otro sinónimo son expresiones mías para referirme a esas cuatro propiedades. Procuré no utilizar "posición, posicionar..." para evitar que confusiones con la propiedad "position".

      [3] Por la fecha del post esa información fue obtenida del nivel 2.1 de Css.
      Le remito a la fuente original y a la traducción al español del Sidar

      Un saludo

      Eliminar
    2. La primera pregunta está resuelta el tema del valor absoluto, pero “3 valores para dotarlos de tamaño (anchura y altura)” singo si estar de acuerdo ya que haciendo pruebas si quieres dotarde de ancho con los 2 valores lefy y rigth suficiente y si quieres dotarle de altura tienes que darle top y bottom es decir el 3 se de dónde sale.

      Y la tercera pregunta me remitiste al post, hasta que no lo lea detenidamente no sabré si despejare la duda.

      Eliminar
  4. pd:
    la 2ª pregunta también la había entendido, el lio era que usaste sinónimos para los mismo en varias ocasiones y por ahí me perdí

    ResponderEliminar
  5. Sobre la 3ª, en el artículo que me pasaste sale de la misma manera y no aclara nada al respecto.

    Sale así:

    10.3.5 Elementos no reemplazados, flotantes
    Si 'left', 'right', 'width', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'.
    10.3.6 Elementos reemplazados, flotantes
    Si 'left', 'right', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'. Si 'width' es 'auto', su valor es el ancho intrínseco del elemento.

    Como bien comente aquí no se sabe si está diciendo que esto se aplica a elementos reemplazados y también a flotantes o a elementos reemplazados que sean flotantes y cuales propiedades se aplican a uno u a otros en el caso, ya que a un float no se le puse aplicar la propiedad left,top…etc. Por eso creo que esto es mal explicado y da lugar a confusiones.

    ResponderEliminar
  6. Ya encontré el problema:

    El problema venia de la traducción en español del Sidar.

    Sidar: http://www.sidar.org/recur/desdi/traduc/es/css/visudet.html#Computing_widths_and_margins

    10.3.5 Elementos no reemplazados, flotantes
    Si 'left', 'right', 'width', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'.
    10.3.6 Elementos reemplazados, flotantes
    Si 'left', 'right', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'. Si 'width' es 'auto', su valor es el ancho intrínseco del elemento.

    Fuente original w3c: http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

    10.3.5 Floating, non-replaced elements
    If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
    If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
    Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
    Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
    10.3.6 Floating, replaced elements

    Como se puede ver, en ningún momento en el original se nombra a las propiedades left,top…etc en los elementos reemplazados y los float, asi que sidar no sé de donde habrá sacado las propiedades esas y las puso allí, y esto no es error de ningun nivel de la especificación ni nada, ya que no es nada normal aplicar una propiedad left o top a un flotante ya que eso no es correcto. Al final es lógico que uno se arme un lio.
    Ahora, creo que al post le falta corregir estos dos apartados conforme esta en el original y algunas cosas más y se podría entender mucho mejor.

    Un saludo

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap