Posicionamiento Absoluto y Fijo

En este apartado veremos dos tipos de posicionamiento, el absoluto y el fijo.

Posicionamiento Absoluto

Se utiliza para posicionar de forma exacta la caja que estemos trabajando, al igual que el posicionamiento relativo se utilizan las propiedades top, bottom, left y right para desplazar.

Es mucho más complejo de entender ya que su punto de referencia es el contenedor que lo contiene, además el resto de elementos de la página se ven afectados y modifican su posición.

El estándar de CSS 2.1 indica que las cajas posicionadas de forma absoluta “salen del flujo normal de la página”, lo que provoca que el resto de elementos de la página se muevan y en ocasiones, ocupen la posición original en la que se encontraba la caja.

Toda la definición detallada en:
http://librosweb.es/libro/css/capitulo_5/posicionamiento_absoluto.html

Html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Posicionamiento Relativo</title>
	<link rel="stylesheet" href="relativo.css">
</head>
<body>
	<div class="verde"><h1>Verde</h1></div>
	<div class="rojo"><h1>Rojo</h1></div>
	<div class="azul"><h1>Azul</h1></div>
</body>
</html>

css (posicionamiento absoluto)

.verde{
	width: 200px;
	height: 100px;
	background-color: green;
	color:#fff;
	text-align: center;
	position: absolute;
	top: 100px;
	left: 300px;
}
.rojo{
	width: 200px;
	height: 400px;
	background-color: red;
	color:#fff;
	text-align: center;
}
.azul{
	width: 200px;
	height: 100px;
	background-color: blue;
	color:#fff;
	text-align: center;
}

Posicionamiento Fijo

Este es un tipo de posicionamiento absoluto con la principal diferencia que una caja posicionada de forma fija, su posición es fija dentro del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario haga scroll.

Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve la página HTML en el navegador, no existe ninguna diferencia entre estos dos modelos de posicionamiento.

En los siguientes apartado veremos un ejemplo práctico de cómo hacer un menú fijo para utilizar este tipo de posicionamiento.

Html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Posicionamiento Relativo</title>
	<link rel="stylesheet" href="relativo.css">
</head>
<body>
	<div class="verde"><h1>Verde</h1></div>
	<div class="rojo"><h1>Rojo</h1></div>
	<div class="azul"><h1>Azul</h1></div>
</body>
</html>

Css

.verde{
	width: 200px;
	height: 100px;
	background-color: green;
	color:#fff;
	text-align: center;
	position: fixed;
	top: 200px;
}
.rojo{
	width: 200px;
	height: 600px;
	background-color: red;
	color:#fff;
	text-align: center;
}
.azul{
	width: 200px;
	height: 700px;
	background-color: blue;
	color:#fff;
	text-align: center;
}