Posicionamiento
absoluto Posicionamiento
absolutoLa propiedad position establece el esquema de posicionamiento absoluto de un elemento. Existen cuatro tipos en el esquema de posicionamiento absoluto: estático (static), relativo (relative), absoluto (absolute) y fijo (fixed).
Cuando se establece la propiedad position como static, el elemento se sitúa en la posición que le corresponde de acuerdo con el flujo normal del documento. Es decir, el posicionamiento estático es equivalente al esquema normal.
Cuando se establece la propiedad position como relative, el navegador reserva el espacio en la página que tendría el elemento de acuerdo con el flujo normal del documento, pero lo representa desplazado con respecto a esa posición. El desplazamiento relativo se establece mediante las propiedades top, bottom, left y right.
Los elementos con posicionamiento absoluto relativo "reservan" espacio. Es decir, el hueco de la posición original se mantiene, aunque el elemento se haya desplazado, como muestra el siguiente ejemplo:
  |
div { position: relative; top: 3em; right: 100%; border: black 1px solid; background-color: white; } |
Este párrafo no tiene posicionamiento absoluto relativo. El párrafo siguiente sí que tiene y por eso se ve un hueco entre los dos párrafos. Este párrafo sí tiene posicionamiento absoluto relativo. Está desplazado hacia abajo y hacia la izquierda. El hueco que ocuparía en su posición original se mantiene. Este párrafo no tiene posicionamiento absoluto relativo. El párrafo anterior sí que tiene y ahora se ve a la izquierda de este. |
Falta contar cómo se cuenta top, bottom, left y right (valores positivos y negativos, etc).
Cuando se establece la propiedad position como fixed, el elemento se sitúa en la posición indicada y no se puede desplazar. Aunque la página sea larga y se pueda desplazar verticalmente, el elemento fijo estará siempre en la misma posición de la pantalla.
La posición del elemento se establece mediante las propiedades top, bottom, left y right (aunque también se pueden utilizar las propiedades width y height).
La página de ejemplo de posicionamiento fijo muestra una lista en forma de menú con posicionamiento fijo. Al mover la barra de desplazamiento, el menú se mantiene siempre en la misma posición.
Nota: Internet Explorer 6 no era capaz de representar este tipo de posicionamiento, como se explica en la página de diferencias entre IE6 e IE7.
Los valores de las propiedades se interpretan como en el caso del posicionamiento absoluto (position: absolute). La página de ejemplo de posicionamiento absoluto muestra varios párrafos con posicionamiento absoluto. En este ejemplo los valores están expresados en porcentaje (que se interpretan como porcentajes de la ventana completa).
Internet Explorer no aplica correctamente el posicionamiento fijo (position: fixed) a una tabla. Coloca la leyenda (<caption>) en el lugar correcto, pero no las celdas de la tabla. Firefox lo hace bien. Si la tabla está metida en una división y el posicionamiento lo tiene la división, Internet Explorer ya lo hace bien.
Cuando se establece la propiedad position como absolute, el elemento se sitúa en la posición exacta que se le indique.
La posición del elemento se establece mediante las propiedades top, bottom, left y right (aunque también se pueden utilizar las propiedades width y height).
La propiedad top establece la posición del lado superior del elemento contando desde el borde superior de la ventana (de arriba a abajo, es decir, cuanto más grande es el valor más hacia abajo se coloca el elemento).
La propiedad bottom establece la posición del lado inferior del elemento contando desde el borde inferior de la ventana (de abajo a arriba, es decir, cuanto más grande es el valor más hacia arriba se coloca el elemento).
La propiedad left establece la posición del lado izquierdo del elemento contando desde el borde izquierdo de la ventana (de izquierda a derecha, es decir, cuanto más grande es el valor más hacia la derecha se coloca el elemento).
La propiedad right establece la posición del lado derecho del elemento contando desde el borde derecho de la ventana (de izquierda a derecha, es decir, cuanto más grande es el valor más hacia la izquierda se coloca el elemento).
La página de ejemplo de posicionamiento absoluto muestra varios párrafos con posicionamiento absoluto. En este ejemplo los valores están expresados en porcentaje (que se interpretan como porcentajes de la ventana completa).
Nota: Internet Explorer 6 no representaba correctamente este tipo de posicionamiento, como se explica en la página de diferencias entre IE6 e IE7.
El navegador no tiene en cuenta la posición de los elementos con posicionamiento absoluto absoluto al mostrar el resto de elementos de la página, es decir, que los elementos con posicionamiento absoluto absoluto no reservan espacio.
Las propiedades width y height establecen el tamaño de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).
Si no se establece la anchura de un elemento, el elemento ocupa todo el ancho disponible. Si no se establece la altura de un elemento, el navegador le da el tamaño necesario en función de su contenido (sin contar los elementos flotantes).
Si se establece la anchura y altura de un elemento, el contenido del elemento puede no caber en el tamaño asignado. La propiedad overflow establece el comportamiento en esto casos.
Las propiedades min-width y min-height establecen el tamaño mínimo de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).
Las propiedades max-width y max-height establecen el tamaño máximo de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).
Los ejemplos siguientes muestran el funcionamiento de estas propiedades. Los tamaños de división definidos en porcentaje se refieren a porcentajes con respecto al ancho de la celda de la tabla, que a su vez depende del ancho de la ventana del navegador. Cambiando el tamaño de la ventana del navegador se puede observar cómo cambia el tamaño de cada división (y cómo las propiedades min-width y max-width limitan esos cambios).
| |
div { width: 250px; height: 30px; border: black 1px solid; } |
Hola, mundo |
| |
div { width: 200px; height: 30px; border: black 1px solid; } |
Hola, mundo |
| |
div { width: 80%; height: 30px; border: black 1px solid; } |
Hola, mundo |
| |
div { width: 80%; min-width: 200px; height: 30px; border: black 1px solid; } |
Hola, mundo |
| |
div { width: 80%; max-width: 250px; height: 30px; border: black 1px solid; } |
Hola, mundo |
| |
div { width: 80%; min-width: 200px; max-width:
250px; height: 30px; border: black 1px solid; } |
Hola, mundo |
Las propiedades top, bottom, left y right definen la posición superior, inferior, izquierda y derecha, respectivamente, de un elemento. El significado exacto de estas propiedades depende del esquema de posicionamiento que se esté utilizando.
En el caso del posicionamiento absoluto fixed y absolute se pueden utilizar también las propiedades width y height. Es decir, para establecer la posición horizontal de un elemento basta con establecer dos de las tres propiedades left, right y width, y para establecer la altura de un elemento basta con establecer dos de las tres propiedades top, bottom y height.
La propiedad overflow establece el tratamiento que debe dar el navegador al contenido que no cabe en el elemento padre. Los valores posibles de esta propiedad son: visible, hidden (oculto), scroll (mostrar siempre barras de desplazamiento), auto (mostrar barras cuando sea necesario).
Si está definido el tamaño del elemento y overflow tiene el valor visible, Internet Explorer no hace caso de la altura del elemento y lo amplía hasta abarcar todo su contenido, mientras que en Firefox el contenido desborda el elemento y se superpone a los siguientes elementos.
| |
div { width: 100px; height: 100px; border: black 1px solid; } |
Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. |
| |
div { width: 100px; height: 100px; border: black
1px solid; overflow: visible; } |
Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. |
| |
div { width: 100px; height: 100px; border: black
1px solid; overflow: visible; } |
Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. Este texto ya está fuera de la división. |
| |
div { width: 100px; height: 100px; border: black
1px solid; overflow: hidden } |
Este texto ya está fuera de la división. |
| |
div { width: 100px; height: 100px; border: black
1px solid; overflow: scroll } |
Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. |
| |
div { width: 100px; height: 100px; border: black
1px solid; overflow: auto } |
Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. |
| |
div { width: 100px; height: 100px; border: black
1px solid; overflow: auto } |
Esta_división_contiene_un_texto_bastante_largo_que_no_cabe_en_el_tamaño_asignado. |
Los elementos de una página web tienen no solamente una posición en el plano XY de la ventana, sino también profundidad. La propiedad z-index permite establecer la profundidad del elemento, que solamente puede observarse cuando varios elementos se superponen. El valor de la propiedad z-index debe ser un número entero. Los elementos con mayor z-index se colocan sobre los elementos con menor z-index.
| |
div.d1 { width: 150px; height: 150px; |
La propiedad z-index indica la profundidad a la que se encuentra un elemento. La propiedad z-index indica la profundidad a la que se encuentra un elemento. |
| |
div.d1 { width: 150px; height: 150px; position: absolute; top: 0%; left: 0%; background-color: lightblue; z-index: 5; } div.d2 { width: 150px; height: 150px; position: absolute; top: 100px; left: 100px; background-color: #DDDDDD; } |
La propiedad z-index indica la profundidad a la que se encuentra un elemento. La propiedad z-index indica la profundidad a la que se encuentra un elemento. |