Propiedad position

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 -en algunos casos- va acompañada de otras cuatro propiedades que definen la colocación del objeto: top, right, bottom y left. Los objetos posicionados con absolute y fixed 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.

Los 4 valores de position:

Relative: 

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.

Absolute: 

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 un cartel que diga “novedad” cruzado por adelante de un producto, el elemento “novedad” debe tener posición absoluta y el producto posición relativa. Además en el código html el elemento “novedad” debe estar escrito 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.

Ejemplo de position absolute

Para lograr eso, en html deberíamos escribir:

<li class="productos">
   <img src="foto.png">
   <span class="novedad">Novedad</span>
</li>

Y en CSS:

.productos {position: relative; ... }
.novedad {position:absolute; top:-20px; left:-20px; ...}

Fixed: 

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 por ejemplo para fijar el ícono de Whatsapp abajo a la derecha.

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 si lo necesitamos. Por esta razón, cuando estamos maquetando, si el elemento es de bloque por ejemplo un <nav> y todavía no tiene contenido, al agregarle la propiedad fixed, desaparece (pierde ancho).

Static: 

Es la posición por defecto. 

En la práctica no se usa tanto, salvo que hayamos definido una posición fija o absoluta a un elemento y necesitemos volver a la posición original (static) en una regla media querie.

Las propiedades de colocación: top, right, bottom y left

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.

La propiedad z-index

Los objetos con posición definida como fija o absoluta 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.

Carrito de compra
USD Dólar de los Estados Unidos (US)