Puede determinar el tipo de posicionamiento para un área o un elemento. Para ello se utiliza la propiedad position. Esta propiedad especifica cómo debe posicionarse un elemento en última instancia. Hay un total de cuatro variantes de posicionamiento diferentes para elegir.
- static - no se utiliza ningún posicionamiento especial y se produce un flujo de texto normal.
- relative - el posicionamiento relativo tiene lugar basándose en la posición normal o inicial del elemento.
- absoluto - el posicionamiento absoluto tiene lugar a través de las propiedades superior, inferior, izquierda y derecha. Los elementos posicionados de forma absoluta están fuera del flujo de texto normal. La posición absoluta se calcula en relación a los bordes del elemento padre (pero sólo si éste no tiene la propiedad position: static).
- fixed - el elemento está posicionado de forma absoluta. El elemento permanece en su sitio al desplazarse.
Las dos primeras variantes permiten un posicionamiento variable. En este caso, los elementos se posicionan unos respecto a otros. Los dos ejemplos siguientes muestran cómo podría ser este tipo de posicionamiento:
- El elemento 2 se sitúa 30 píxeles desplazado respecto al elemento 1.
- El elemento 2 se sitúa detrás del elemento 1.
La situación es diferente con los posicionamientos fijo y estático. Estos permiten colocar elementos en posiciones muy específicas. La información de posicionamiento se refiere al elemento padre o a la ventana del navegador. He aquí un ejemplo:
- El elemento 1 se coloca exactamente a 30 píxeles del borde derecho de la ventana del navegador y a 20 píxeles del borde superior.
A continuación se presentan en detalle las distintas variantes de posicionamiento. Pero primero una nota: La flotación juega un papel importante en relación con el posicionamiento de los elementos. Entraré en más detalles sobre este importante principio CSS en el próximo tutorial. Básicamente, la flotación tiene que ver con cómo fluyen los elementos de la página web en el documento. Los elementos se empujan tanto como sea posible en la dirección respectiva. El flujo de los elementos puede ser determinado explícitamente por el tipo de posicionamiento.
Posicionamiento relativo
Al utilizar el posicionamiento relativo mediante position: relative, ocurren dos cosas:
- La caja se desplaza fuera de su flujo normal.
- Se reserva la posición original del elemento.
Al reservar la posición original, los demás elementos se comportan como si el elemento siguiera realmente presente en su posición.
Ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #box { position: relative; top: 25px; right: 25px; background-color:#33CCFF; } </style> </head> <body> <div id="box">Caja 1</div> <div>Caja 2</div> <div>Caja 3</div> </body> </html>Aquí se han definido tres cajas.
A las cajas 2 y 3 no se les ha dado ninguna instrucción de posicionamiento. Por lo tanto, siguen el flujo normal del documento. La caja 1, en cambio, se ha posicionado relativamente. Esto significa que las cajas 2 y 3 no se ven afectadas en absoluto por la caja 1, es decir, que el espacio de la caja 1 no es ocupado por estas cajas. Las cajas se posicionan utilizando las especificaciones superior, inferior, izquierda y derecha. El posicionamiento relativo se basa en la posición original en el flujo del documento.
- arriba: 25px - la caja se desplaza 25 píxeles hacia abajo. En la posición normal de la caja, se insertan 25 píxeles en la parte superior.
- derecha: 25px - la caja se desplaza 25 píxeles hacia la izquierda. En la posición normal de la caja, se insertan 25 píxeles a la derecha.
Las especificaciones de píxeles son relativas a la posición original. Las especificaciones determinan dónde se inserta el valor, es decir, arriba y a la derecha. Este aspecto es decisivo. Las especificaciones no determinan hacia dónde se desplaza la caja.
El posicionamiento absoluto
Continuamos con el posicionamiento absoluto. Este tipo de posicionamiento saca el elemento completamente del flujo. Los demás elementos de la página se comportan como si el elemento no estuviera presente en absoluto.
Un ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #box { position: absolute; top: 25px; right: 25px; background-color:#33CCFF; } </style> </head> <body> <div id="box">Caja 1</div> <div>Caja 2</div> <div>Caja 3</div> </body> </html>Aquí también se han definido tres cajas. La caja 1 está posicionada de forma absoluta.
A diferencia del posicionamiento relativo, no se reserva espacio para la caja 1. Las cajas 2 y 3 se deslizan hacia arriba.
Las especificaciones de posicionamiento arriba, derecha, abajo o izquierda ya no se basan en la posición original de la caja en el flujo. En su lugar, la información se refiere al siguiente elemento circundante posicionado con relativo, absoluto o fijo. Si no hay ningún elemento circundante, el posicionamiento es relativo al elemento superior del árbol del documento, es decir, a html.
Posicionamiento con fixed
Los elementos se pueden fijar con position: fixed. He aquí otro ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> p { margin-left: 25%; } #fixed { position: fixed; top: 20px; left: 20px; background-color:#33FFCC; width: 20%; padding: 10px; border: 1px solid black; } </style> </head> <body> <div id="fixed">Efecto Splitter parte 1</div> <p>Sólo por tiempo limitado, el último tutorial o vídeo de formación en la vista online o el contenido de la categoría de descarga está libre de puntos. Más información aquí ...</p> </body> </html>La caja fija no se desplaza, sino que permanece siempre en la posición que se le ha asignado.
Para las cajas fijas, el elemento circundante es siempre la ventana del navegador.
Tenga en cuenta que también hay problemas considerables con los elementos fijos en navegadores antiguos. IE6, por ejemplo, no hace lo que se supone que debe hacer. Si también quieres/necesitas optimizar tus páginas web para este navegador, ahora tienes dos opciones:
- Prescindir de las cajas fijas.
- Usar hacks para IE.
Si quieres usar un hack, te recomiendo el sitio web http://thestyleworks.de/tut-art/iewinfixed.shtml. Utiliza un pequeño JavaScript para mostrar cómo optimizar las cajas fijas para este navegador.
