Posicionamiento relativo al padre en CSS

Si a un elemento se le asigna relative, y a su descendiente - absolute, entonces este descendiente se posicionará relative a su padre, y no relative a la ventana del navegador.

Por lo general, en este caso al padre se le indica relative sin desplazamientos. En este caso, con este padre no ocurre nada, pero todos sus descendientes ahora se posicionarán relativemente a él.

Veamos algunos ejemplos.

Ejemplo

Para empezar, simplemente hagamos un bloque padre y un bloque descendiente sin posicionamiento:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Ejemplo

Ahora posicionemos absolutamente el bloque verde. Como al padre no se le indicó relative, el descendiente se posicionará relative a la ventana del navegador:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Ejemplo

Indiquemos ahora al padre relative. En este caso, el descendiente se posicionará relative a su padre:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Tareas prácticas

En las siguientes tareas, el bloque principal está centrado usando margin con el valor auto, y los demás se posicionan relative a él usando la propiedad position.