3. Determinando la posición de la caja
Usando las propiedades que veremos a continuación podemos fijar la posición del elemento en la página.
El margin se divide en cuatro segmentos: top (superior), bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir margin-left, margin-right, margin-top y margin-bottom.
La propiedad position
| Sintaxis: |
position: <valor>
|
| Valores posibles: |
static | relative | absolute | fixed | inherit
|
| Valor inicial: |
static
|
| Se aplica a: |
Todos los elementos
|
| Heredado: |
No
|
La posición de la caja podrá desplazarse respecto de la que normalmente ocuparía usando las propiedades 'top', 'right', 'bottom' y 'left' que se verán a continuación. Esta propiedad position determina como actuarán dichas propiedades:
- static
- Esta es la posición predeterminada y la que conocemos en HTML. La
caja se sitúa dentro del flujo normal de la página y las propiedades
'top', 'right', 'bottom' y 'left' no se aplican.
- relative
- La posición de la caja se ajusta en relación a su posición
normal dentro de la página. Cuando una caja X se posiciona relativamente
la caja siguiente se sitúa como si X no se hubiera desplazado.
- absolute
- Las cajas son quitadas del flujo normal de la página y su posición
se especifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estas
propiedades especifican los desplazamientos con respecto al bloque de contención
de la caja por lo que los elementos posicionados absolutamente no tienen ninguna
influencia sobre la posición de las cajas siguientes. El bloque de
contención para una caja posicionada es establecido por el antepasado posicionado
más cercano o, si no existe, por el bloque de contención inicial (la
esquina superior izquierda de la página, en el modelo visual).
- fixed
- El posicionamiento fijo es una subcategoría del posicionamiento absoluto.
La única diferencia es que para una caja posicionada de modo fijo, el bloque
de contención es establecido por el acceso visual (la pantalla del monitor)
y el elemento no se mueve cuando se realiza un desplazamiento. Esto significa
que cuando se hace un scroll en la página los elementos con position:
fixed mantienen su posición en la pantalla.
Las propiedades 'top', 'right', 'bottom' y 'left' tienen la siguiente sintaxis:
Propiedades top, right, bottom y left.
| Sintaxis: |
top: <valor>
right: <valor>
bottom: <valor>
left: <valor>
|
| Valores posibles: |
medida | porcentaje | auto | inherit
|
| Valor inicial: |
auto
|
| Se aplica a: |
Todos los elementos
|
| Heredado: |
No
|
Estas propiedades determinan la posición del borde correspondiente del elemento.
Los valores para las cuatro propiedades tienen los siguientes significados:
- medida
- El desplazamiento es una distancia fija desde el borde de referencia.
- porcentaje
- El desplazamiento es un porcentaje del ancho (para 'left' o 'right') o de
la altura (para 'top' y 'bottom') del bloque de contención. Para 'top'
y 'bottom', si la altura del bloque de contención no está especificada
explícitamente (es decir, depende de la altura del contenido), el valor
del porcentaje es interpretado como 'auto'.
- auto
- El efecto de este valor varía de acuerdo a otras propiedades (como el tamaño).
Para las cajas con position:absolute, el desplazamiento es con
respecto al bloque de contención de la caja. Para las cajas con position:relative,
el desplazamiento es con respecto al borde externo de la propia caja (es decir,
la caja de desplaza de su posición normal dentro de la página
de acuerdo a estas propiedades).
Para las cajas con position:fixed el bloque
de contención es establecido por el acceso visual (la pantalla del monitor)
y el elemento no se mueve cuando se realiza un desplazamiento. Esto significa
que cuando se hace un scroll en la página los elementos con position:
fixed mantienen su posición en la pantalla.