Uso de la propiedad position en CSS

Llega un momento en el aprendizaje CSS cuando llegas a la enorme duda de cuándo usar la propiedad position. La propiedad position en CSS es aquella que nos permite cambiar el comportamiento de espacio de algún elemento, pero como les dije, no muchos saben usar todas las opciones disponibles, y por eso en este tutorial vamos a ver los diferentes tipos de posición en CSS, espero les guste el tutorial. Así que comenzamos.

Position

La propiedad position viene derivada de lo que se conoce como posicionamiento CSS, es decir, aquellas propiedades que nos permiten modificar la forma en que se posiciona un elemento con respecto a los demás, como su visibilidad, su superposición, su flujo, su distancia arriba, abajo, a la derecha, y a la izquierda, entre otras propiedades. Entonces, entre esas propiedades está Position, que como su nombre lo dice nos ayuda a posicional un elemento en un documento web.

Entonces, la propiedad position tiene 4 atributos que podemos definir: static, relative, absoluted, y fixed, entonces vamos a ver cada uno de ellos.

Position: static

static es el atributo por defecto por cualquier elemento, sin siquiera definirlo todos los elementos, llámese botón, texto, links, imágenes, contienen el atributo, que les permite aparece en línea, uno enseguida del otro. Realmente no hace falta definirlo, a menos que se tengan otros atributos y se quiera uno específicamente static.

#estilo{
     position:static;
}

Position: relative

Es curioso y hasta a veces un poco de entender pero vamos a ver. El atributo relative nos permite posicionar un elemento está conforme al flujo normal de la posición de los elementos, si inserto un botón y luego un link, el último aparecerá después del botón. La diferencia es que podemos usar las propiedades top y left para posicionarlos en esa misma línea donde nosotros queramos.

En el ejemplo se ve muy fácil, el objeto verde está a cierta distancia, está posicionado, y aunque aparece sobrepuesto del elemento rojo, la posición está en relación del flujo normal, o la línea de aparición, no en relación del documento.

<div style="position: relative; width: 300px; padding: 10px; background-color: #066; color:#ffc; top:100px; left: 30px;">capa de posicionamiento relative<br>Se tiene en cuenta esta capa para posicionar las siguientes.</div>
<h2>hola!</h2>

Position fixed

El atributo fixed hace caso a su nombre, cuando un elemento es nombrado fixed significa que este elemento no se va a mover de ninguna manera en el sitio web. Lo que hace es que primero el elemento se hace flotante, sale del flujo del sitio, entonces, si nosotros quisiéramos definir un top y left nos lo acepta, lo que pasa ahora es que cuando vamos desplazándonos con la barra de desplazamiento, veremos que el elemento queda estático, no desaparece como los demás.

<div style="position: fixed; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;">
Esta capa tiene posicionamiento fixed.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<h1>Hola</h1>
<br>
<br>
<br>
<br>
Pongo texto para que se vea!!
<br>
<br>
<br>
…

Position: absolute

Este atributo es como relative pero mucho más poderoso, nos permite hacer romper el flujo total del elemento, no sólo de la línea donde esté, sino en todo el documento o sitio. Una vez fijado absolute, podemos definir top, bottom, left, right, width, height; y como les decía, a diferencia de relative que empieza a contar a partir de la línea donde esté, absolute empieza desde el inicio del sitio web, en la esquina superior izquierda. Este atributo es el más usado en la mayoría de aplicaciones y sitios web.

<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 2;">
Esta capa tiene posicionamiento absoluto.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>