soy Kseso y esto EsCSS

Repaso a lo básico y lo más nuevo: Position en Css 2.1 y 3. Porque hay que saber estar.

Repaso a lo básico y lo más nuevo: Position en Css 2.1 y 3. Porque hay que saber estar.

·Por Kseso ✎ 2

La propiedad position en Css y sus valores

Origen img: Rafael Castillejo

Esta propiedad es la que define dónde y cómo se colocarán los distintos elementos de una caja y con sus valores alterar el lugar natural que le correspondería ocupar por el orden en que aparece escrito en el html. Esto último es lo que se conoce como el flujo del html. Es una propiedad que no se hereda.

La propiedad "position" en css2.1 admite 4 valores:

  • static
  • relative
  • absolute
  • fixed

Complementados con las propiedades de desplazamiento de las cajas: 'top', 'right', 'bottom', 'left'.
A las anteriores, Css3 añade en su borrador dos más: 'center' y 'page' y complementa con los flotados posicionados.

Static

La posición estática ("static") es el valor que tienen por defecto todas las cajas en HTML. Su colocación en la pantalla será la que indique el flujo del documento. Un ejemplo con sus códigos:

.static {position: static;} .una, .dos, .tres {width: 100px; height: 75px;} .una {background-color: rgba(94,136,0,.5);} .dos {background-color: rgba(0,0,255,.5);} .tres {background-color: rgba(255,102,0,.5)} <-- !html --> <div class="una static"></div> <div class="dos static"></div> <div class="tres static"></div>

Con el valor static hay que tener presente algunas características, como por ejemplo que la propiedad z-index no aplica o que no actúan como referencia para el posicionado de sus descendientes.

Relative

Al igual que el valor static, las cajas con position: relative también se colocan inicialmente en el lugar que les corresponde por su orden de aparición en el flujo del documento, pero esta posición sí puede alterarse con las propiedades de desplazamiento. Ten presente que dicho desplazamiento será ignorado por el resto de los elementos y por lo tanto se comportarán como si dicho desplazamiento no existiese. También son referentes para sus hijos posicionados y z-index sí aplica.

.relative {position: relative;} .una, .dos, .tres {width: 100px; height: 75px;} .una {background-color: rgba(94,136,0,.5);} .dos {background-color: rgba(0,0,255,.5);} .dos.relative {top:-25px; left:-50px; z-index: 5;} .tres {background-color: rgba(255,102,0,.5)} <-- !html --> <div class="una relative"></div> <div class="dos relative"></div> <div class="tres relative"></div>

Como ves, la caja azul ha sido desplazada de su lugar natural 25px hacia arriba y 50px a su derecha y sin embargo los elementos que la rodean no se ven perturbados. Siguen en el lugar que les corresponde ocupar por su aparición en el flujo del documento. Así mismo, la caja azul se sobrepone a la del código por su z-index.

Absolute

El tercer valor para position es absolute. Este valor saca al elemento del flujo y lo coloca en el lugar indicado por las propiedades de desplazamiento. Pero la referencia no es su lugar natural, como en relative, sino el ancestro más próximo que tenga declarado un valor para position distinto a static.

Estas características permiten colocar un elemento con total precisión. También es el valor implicado en los elementos ocultos para que tras su aparición no haya movimientos molestos por reordenación del resto.

Fixed

Es un absolute con una particularidad: la posición no se calcula respecto a ningún ancestro ni siquiera el body o el html. Su referente es el área de visión, no moviéndose de ella aunque se haga scroll si es la ventana del navegador en los medios visuales. En los medios paginados significa que se mostrará (imprimirá) en el mismo lugar de todas y cada una de las páginas.

Elementos fuera del flujo:

Cualquier caja al ser sacada del flujo, esto es, alterado su comportamiento natural por los valores de position absolute y fixed, así como con float, significa que su contenedor (en las especificaciones son llamados bloques de contención) no crece junto a ellos. Esto es, no verás el fondo o los bordes este contenedor rodeando los flotados o posicionados. Esto suele ser motivo de múltiples consultas en foros. Todo se arregla utilizando cualquiera de los métodos conocidos como "limpiar float".

Las propiedades de desplazamiento

Las cuatro propiedades de desplazamiento top | right | bottom | left además de servir para desplazar o indicar el punto de colocación de un elemento también son usadas para definir el tamaño de una caja. Ya sea la anchura o la altura o los dos.
Al dar el tamaño de esta manera los mismos valores son donde se colocará la caja.
Admiten, como viste en el ejemplo de arriba, valores negativos.

Lo nuevo de Css3 para position

Origen img: Rafael CastillejoEl documento del W3c "CSS Positioned Layout Module Level 3" introduce novedades sobre el posicionamiento de los elementos. Entre otras añade dos propiedades a las cuatro anteriores:

Position: Center

Con esta propiedad, la caja está explícitamente centrada respecto a su bloque de contención (su padre o ancestro más próximo que no esté en "static") y sobre ese valor se aplican los valores de desplazamiento. Se saca por completo del flujo normal.
La caja con Position: Center sí crea bloque de contención (es referente) para sus descendientes posicionados (no para los fixed).
El contenido de estas cajas no fluye alrededor de sus hermanos, así que como ocurre con las "relative" desplazadas, puede tapar o ser tapado por ellas. Todo depende del valor de z-index.

Position: page

Este valor es un poco mezcla de todos los anteriores. El elemento al que se le declara también sale por completo del flujo y su referente como en "fixed" no es su bloque de contención sino el área de visión. Pero a diferencia de el "fixed" se comporta como un "absolute".
"Position: page" es bloque de contención para el flujo normal de sus hijos y "absolute" (pero no "fixed" u otros "page") y para los desplazamientos.
En los medios paginados sólo se imprimirá en la hoja que le corresponde (en la que se genera), sin repetirse en todas como las "fixed". Y en caso de no caber en su hoja el sobrante se imprimirá en la siguiente.
Sus bordes no colapsan con los de ningún otro elemento.

Relaciones entre "display, "position" y "float"

Estas son las tres propiedades que afectan a la generación de las cajas y del layout, y cuando coinciden así interactúan entre ellas:

  1. Si display:none no se genera caja y position y float no aplican.
  2. Si position=absolute|page|fixed y float=left|right la caja se posiciona como absolute y el valor computado para float es none. Display computa según la tabla de abajo.
  3. Si float es diferente a none la caja se flota y para display según la tabla siguiente.
  4. Si es el elemento raiz (root) display según tabla
  5. Tabla de referencia para el valor computado de display:
    Valor especificado Valor computado
    inline-table table
    inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
    others El mismo que el especificado

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