Escrito por Laura Chuburu
La propiedad position permite colocar un objeto en un lugar totalmente diferente a su ubicación original. Existen 4 valores posibles: relative, absolute, fixed y static. Esta propiedad va siempre acompañada de otras cuatro propiedades que definen la colocación del objeto: top, right, bottom y left. Para logar esto, los objetos posicionados se levantan del nivel donde están el resto de los elementos, colocándose por encima de ellos. Estos diferentes niveles que se crean con los objetos posionados se controlan con la propiedad z-index que define qué objeto se coloca por delante o por detrás.
La posición relativa mueve al objeto en relación a su posición original. Al colocar position:relative a un objeto, no produce cambios por sí mismo. Si lo combinamos con las propiedades de colocación, podemos mover el objeto a determinada distancia hacia arriba, hacia abajo o a los costados a partir de su ubicación.
En la práctica esta posición no se usa tanto para mover al objeto sino para usarlo como punto de referencia para mover otro objeto con posición absoluta que se encuentra dentro de él.
La posición absoluta mueve a un objeto en relación al primer elemento padre que esté posicionado. Esto significa que el elemento que queremos mover (con posición absoluta) se va a mover en relación a la primer etiqueta que lo contenga (elemento padre) si ésta tiene alguna posición definida (generalmente relativa).
Ejemplo: si quiero colocar una imagen que diga "novedad" cruzada por adelante de un producto, la imagen "novedad" debe tener posición absoluta y el producto posición relativa. Además en el código html la imagen "novedad" debe estar escrita dentro del producto, para que éste se considere su "padre". Asi ambos objetos se moverán siempre juntos.
La ubicación de termina de definir con las propiedades de colocación: top, right, bottom y left.
Para lograr eso, en html deberíamos escribir:
<li class="productos">
<img src="foto.png">
<img src="novedad.png" class="novedad">
</li>Y en CSS:.productos {position: relative; ... }
.novedad {position:absolute; top:-20px; left:-20px; ...}
La posición fija coloca a un objeto en relación a la ventana del navegador, también va acompañada de las propiedades de colocación: top, left, bottom o left. No importa dónde esté escrito el objeto en el html, porque esta posición ignora por completo esa ubicación.
Esta posición se usa para colocar un menú fijo arriba y que no desaparezca cuando la página hace scroll, también se usa para colocar las redes sociales a la derecha del navegador, o para fijar cualquier elemento por ejemplo el chat de Facebook.
NOTA: cuando a un elemento de bloque le definimos la propiedad fixed, éste pierde el ancho 100% que tiene por defecto, por lo que hay que escribirlo en la regla CSS. Por esta razón, cuando estamos maquetando, si el elemento es de bloque y no tiene contenido, al agregarle la propiedad fixed, desaparece (pierde ancho).
Es la posición por defecto.
En la práctica se usa mucho en los sitios responsive. Por ejemplo: si en el diseño para pc el sitio tiene un objeto con posición absoluta o fija, luego por medio de las reglas media queries, en el diseño para celulares, se le vuelve a poner la posición static para que vuelva a la posición normal.
Estas propiedades permiten definir la ubicación exacta del objeto. Los valores pueden ser en pixels, ems o porcentaje. Estos valores se van a aplicar desde diferentes puntos de referencia, eso lo define la posición elegida (relative, absolute o fixed).
Ejemplo1: Si a un objeto de posición absoluta le agregamos top:30px; right:30px, significa que va a colocarse 30px en relación a los bordes superior y derecho del elemento que lo contiene... si ese elemento tiene posición definida (generalmente relativa).
Ejemplo2: Si queremos poner un menú que ocupe todo el ancho de la pantalla y que se mantenga fijo y pegado al borde superior del navegador, el código sería:nav {position:fixed; top:0; width:100%}. La propiedad position define en relación a quién se va a ubicar y la propiedad top indica a qué distancia.
Los objetos con posición definida se "levantan" del flujo normal del maquetado colocándose en diferentes niveles o capas. La ubicación de estos niveles los define la propiedad z-index. El valor 1 es el objeto que está más bajo. Es habitual definir un z-index:999 cuando queremos asegurarnos que un objeto esté por encima del resto. NOTA: es sólo un número de orden, no lleva px, ems, ni porcentaje.
