Yahoo! User Interface Blog (YUIBlog)

La posición de propiedad CSS

Esta propiedad se aplica a todos los elementos. Cuenta con cinco valores posibles:

• static
• relative
• absolute
• fixed
• inherit

posición: estática

De la sección 9 modelo de formato visual :

La caja es una caja normal, establecido de acuerdo con el flujo normal . La top , right , bottom , y left las propiedades no se aplican.

Cosas a destacar en esta demo

• El segundo cuadro muestra exactamente donde lo que sería sin la declaración de posición.
• El valor dado a la top no se aplica porque en una "estática" contexto, el valor calculado de las compensaciones de caja es siempre auto .

Cosas para recordar

• Si la position la propiedad de un elemento tiene el valor de la static , ese elemento no se dice que se coloca.
• Porque static es el valor inicial (el valor predeterminado), no hay necesidad de incluir el estilo como en un bloque de declaración a menos que sea para sobrescribir un valor diferente.

position: relative

De la sección 9 modelo de formato visual :

La posición de la caja se calcula de acuerdo con el flujo normal (esto se llama la posición de flujo normal ). Luego la caja se compensa en relación a su posición normal. Cuando una caja B es posicionada relativamente, la posición de la caja siguiente se calcula como si B no fueron compensados.

Cosas a destacar en esta demo

• 'Dos' caja se ha movido por 300 píxeles, pero el cuadro 'tres', así como los párrafos siguientes se quedó en su lugar. Parece como si la caja se levantó de la página, dejando su huella detrás. Esto se debe a una caja de compensación de posición relativa no perturbe el flujo.
• La caja posicionada relativamente superpone los siguientes elementos. Se muestra frente a otras cajas.

Cosas para recordar

• Los valores calculados son siempre la izquierda = derecha y de arriba-abajo =. Si la direction del bloque de contención es ltr , el valor de la "izquierda" gana y "derecha" se convierte en - "izquierda". Si direction del bloque de contención es rtl , 'right' gana e "izquierda" se ignora. Los autores podrían sacar provecho de cómo funcionan las cosas mediante el establecimiento de igual valor a las propiedades opuestas.
• A diferencia de la "absoluta" del modelo, top , right , bottom , y left propiedades no se pueden estirar, ni reducir el tamaño del cuadro (que no pueden cambiar su tamaño).

position: absolute

De la sección 9 modelo de formato visual :

Posición de la caja (y posiblemente el tamaño) se especifica con la top , right , bottom , y left propiedades. Estas propiedades especifican los desplazamientos con respecto a la caja de bloque que contiene . Una caja posicionada absolutamente se elimina de la circulación normal del todo (no tiene ningún impacto sobre los hermanos siguientes) y le asigna una posición con respecto a un bloque de contención. Además, si bien posicionados de forma absoluta las cajas tienen márgenes, no se derrumbe con cualquier otro margen.

Cosas a destacar en esta demo

• Debido a que ninguna caja de compensación se especifica, caja de 'dos' no se movió de su posición original, pero si se hubiera utilizado top:0;left:0; por ejemplo, que el cuadro sería en la esquina superior izquierda de la ventana .
• Diseño inteligente, es como la caja de 'dos' se había labrado con display:none . La caja ha sido retirado de la circulación.
• Con 'dos' caja de fuera de la corriente, 'tres' caja se ha movido en contra de caja de 'uno' (los párrafos han seguido).
• Al igual que todos los elementos retirados de 'dos' del flujo, el cuadro ha horizontalmente celofán.

Cosas para recordar

• Para cualquier elemento "absoluto" o "fijos" colocado el valor calculado para la display es block .
• Para cualquier elemento "absoluto" o "fijos" colocado el valor calculado para la float es none .
• Un "bloque de contención" es una caja que establece un contexto de posicionamiento. Se establece por el antepasado más cercano con una "posición" de "absoluto", "familiar" o "fijo". Esto significa que la caja de los padres no puede ser el bloque de contención .
• La posición por defecto de una caja posicionada absolutamente no es siempre la misma como si se tratara de estilo con la parte superior: 0; izquierda: 0; (en un contexto LTR). Y esto es por dos razones:
  1. El bloque de contención para una caja posicionada es establecido por el más cercano antepasado posicionado, si no hay ninguno, el contenedor de referencia es el elemento raíz. El bloque de contención en la que el elemento raíz de la vida es un rectángulo llamado el bloque de contención inicial. Para los medios de comunicación continua, tiene las dimensiones de la ventana (una ventana o área de visualización de otros en la pantalla) y se basa en el origen de lona. En este ejemplo se muestra el cuadro de posición en relación con la ventana (por defecto bloque de contención).
  2. El elemento se coloca en referencia a la caja de relleno, no el cuadro de contenido ni de la caja de la frontera del bloque de contención. Este nuevo ejemplo demuestra que el cuadro 'dos' sería si los bordes de la caja de relleno no toque los bordes de la caja de contenido (el bloque de contención está body ).
• El tamaño de la caja puede ser el resultado de la top , right , bottom , y left valores de la propiedad. Por ejemplo, poniendo a cero todas las propiedades que el tramo de caja para que coincida con las dimensiones de la caja de relleno de su bloque de contención. Ver a cero todas las compensaciones de caja (nota: IE6 no estirar el cuadro).
• Para crear una superposición de máscaras que no se desplaza con el documento (como en el ejemplo anterior ), ya sea el uso fixed en lugar de absolute o estilo de body con position:relative , como el bloque de posicionamiento inicial es la ventana gráfica (diseño html no funciona en IE) . A medida que esta demostración de superposición muestra.
• position:absolute desencadena hasLayout .

Lo más importante para recordar

Debido a que este esquema de posicionamiento elimina las cajas de la corriente, se considera una mala práctica que utilizan para el diseño.

position: fixed

De la sección 9 modelo de formato visual :

Posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única diferencia es que para una caja fija posición, el bloque de contención es establecido por la ventana . Para los medios de comunicación continua , las cajas fijas no se mueven cuando el documento se desplaza. En este sentido, son similares a las imágenes de fondo fijo . Para los medios paginados (donde el contenido del documento se divide en una o más páginas discretas), cajas con posiciones fijas se repiten en cada página. Esto es útil para colocar, por ejemplo, una firma en la parte inferior de cada página. Las cajas con posición fija que son más grandes que el área de la página se recortan. Partes de la caja de posición fija, que no son visibles en el bloque de contención inicial no se imprimirá.

Cosas a destacar en esta demo :

• Desde el posicionamiento fijo es una subcategoría del posicionamiento absoluto, todo lo que sucedió con "absoluto" es también cierto para "fijo" (el elemento termo-encogibles, se elimina de la circulación, etc.)
• La caja se posiciona en relación a la vista, no se desplaza con la página.
• En IE 6, el cuadro aparece como una caja estática , pero no es un "gracioso" solución para eso.
• Al imprimir el documento, caja de 'dos' aparece en cada página.

Cosas para recordar:

• La posición de la caja se calcula de acuerdo con la "absoluta" del modelo, sino que, además, la caja se fija con respecto a alguna referencia. En el caso de la mano, de proyección, pantalla, tty, y los tipos de medios de comunicación de televisión, la caja se fija con respecto a la ventana y no se mueve cuando se desplaza.
• El contenido puede ser inaccessile a los usuarios videntes si parte de la caja se sitúe fuera del área de visualización.
• En el caso de el tipo de material, los autores pueden querer evitar que un elemento que aparezca en cada página impresa. Tal vez utilizando una regla @ media, como en:

    @ Media print { 
     Logo # {position: static;}
   } 

• Como position:absolute , position:fixed activará hasLayout en IE.

posición: heredar

Si position:inherit se especifica para una caja determinada, entonces tendrá el mismo valor calculado como la propiedad de los padres de la caja.

Tenga en cuenta que IE 6 y 7 no son compatibles con esta palabra clave, excepto cuando se utiliza con direction y visibility (ver el valor de la propiedad CSS heredar ).

Cosas a considerar

Desplazamiento de las cajas

Tenga en cuenta que para absolutamente fijos y cajas de posición, los valores establecidos en porcentaje para top , right , bottom , y left se calculan de acuerdo a las dimensiones del bloque de contención (que puede no ser la caja de los padres).

'Position' y 'overflow'

Una caja con estilo overflow:hidden recortará elementos en posición relativa (cajas anidadas), pero no siempre se esconden los posicionados de forma absoluta. Esto se debe a la caja de los padres no siempre es el bloque de contención (el antepasado más cercano con una "posición" de "absoluto", "familiar" o "fijos").

En pocas palabras, esto significa elementos con posición absoluta se muestran fuera de una caja con estilo overflow: hidden a menos que su bloque de contención es la propia caja o de un elemento dentro de dicha caja. Esta página de demostración muestra cómo funcionan las cosas.

Márgenes

Los autores pueden utilizar los márgenes de los elementos, independientemente de su esquema de posicionamiento.

El caso de la IE

En IE, "posicionamiento" de una caja puede ser una bendición o una maldición:

• En IE6, position:relative (with haslayout) se puede utilizar para prevenir un cuadro de estilo con márgenes negativos de ser recortado por un contenedor principal (ver el posicionamiento de la caja corrige este problema).
• Colocación de un elemento puede "alterar" la pila de cajas en forma de IE 6 y 7, ya que puede establecer un nuevo contexto de apilamiento (ver a un caso de prueba ).

El orden de apilamiento y el apilamiento de nivel

• De acuerdo a la secuencia en el código fuente, cajas de posición de ponerse delante de los flotadores y las cajas en el flujo normal.
• Los autores pueden especificar los niveles de la pila a través de la propiedad 'z-index' sólo en las cajas colocadas.
• En IE6 y 7, el simple hecho de colocar una caja se puede establecer un contexto de pila (ver más arriba, " el caso de la IE ").

Los dispositivos móviles

Lea el artículo de PPK, la [Sexta] el valor de posición , para averiguar por qué los vendedores ambulantes navegador no puede realmente apoyar position:fixed .

Otras lecturas

• Modelo de formato visual
• Posición (la propiedad CSS)
• La declaración de posición

Un "fantasma" por analogía DrLangbhani:

Un elemento con posición relativa está siempre compensado en relación a su posición normal en el flujo. En otras palabras, que se desplaza con respecto al lugar donde sería en circunstancias normales, y el cambio no afecta a la disposición de los elementos a su alrededor. Es como un fantasma que ha dejado su cuerpo atrás. Un cuerpo que tiene una anchura y altura y afecta a su entorno, pero es invisible. La caja de fantasmas es capaz de moverse, pero aún está conectado al cuerpo de edad en que su posición sigue siendo medidos de la misma. Ahora un elemento con posición absoluta es aún más fácil. Que ya no afecta a su entorno en todo (que es sacado de la corriente de diseño). Ahora es un verdadero fantasma sin cuerpo dejado atrás. En cuanto a sus elementos del mismo se refiere es como si ya no existe. Para obtener su posición, mirar a través de cada uno de los elementos de su padre hasta que encuentre uno, ya sea con position: relative, [position: fixed,] o position: absolute. Este elemento servirá como punto de referencia. Sólo si usted no encuentra una "posición" elemento será desplazado del documento.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!