Posiciones en CSS

En el lenguaje CSS, el posicionamiento puede ser definido fácilmente utilizando algunas de las siguientes propiedades:

position

position determina cómo el explorador va a tratar los atributos de algunos elementos específicos. Position acepta 4 valores: static, relative, absolute y fixed.

Static es el valor predeterminado. Significa que el elemento se quedará donde apareció. Fixed indicará la posición en la cual un elemento se quedará en comparación a la pantalla (u otro). No importa si uno 'baja' a ver más contenido o no, el elemento se quedará en la posición indicada. Desafortunadamente, fixed no funciona bien en Internet Explorer.

Absolute significa que el elemento se quedará donde se indicó. Si el usuario 'baja' por más contenido, el elemento desaparecerá eventualmente de la pantalla. Relative significa casi lo mismo, mas no en comparación a los bordes de una pantalla (como absolute) sino a los bordes de los elementos que lo contienen.

top, right, bottom, left

Top, right, bottom y left indican qué tan lejos de un borde el elemento estará, contando, obviamente, desde sus bordes superior, derecho, inferior o izquierdo, respectivamente.

overflow

Overflow le dice al navegador qué hacer si un elemento es más grande que el área que le ha sido asignada. Acepta visible, hidden, scroll y auto como alternativas, y su predeterminado es auto.

z-index

El z-index indica en qué orden aparecerán las capas cuando hayan sido ubicadas una encima de la otra.

Ejemplos

Si deseara que un elemento esté colocado en la parte inferior de la pantalla, podría hacerlo indicando simplemente esto:

position: fixed;
bottom: 1%;

El logotipo de Heptagrama, por ejemplo, se encuentra posicionado con las siguientes instrucciones CSS:

div#logo {position: absolute; left: 144px; top: 48px; width: 120px}

Conocimiento + Computadores