Propiedad position

La propiedad position define el método de posicionamiento de elementos. Esta propiedad se utiliza con mayor frecuencia junto con las propiedades top, right, bottom, left, que establecen los márgenes superior, derecho, inferior e izquierdo respectivamente.

Sintaxis

selector {
	position: absolute | relative | fixed | static | sticky;
}

Valores para position

Valor	Descripción
`absolute`	Posicionamiento absoluto. El elemento se elimina del flujo normal del documento y se posiciona en relación al ancestro posicionado más cercano (si existe) o en relación a la ventana del navegador.
`relative`	Posicionamiento relativo. El elemento se desplaza en relación a su posición normal en el flujo del documento, pero el espacio que ocupaba permanece reservado.
`fixed`	Posicionamiento fijo. El elemento se elimina del flujo normal del documento y se posiciona en relación a la ventana del navegador. Permanece en su lugar al desplazarse la página.
`static`	Posicionamiento estático. Este valor significa que no hay posicionamiento y el elemento se comporta normalmente.
`sticky`	Posicionamiento adherente. El elemento se comporta como `relative` hasta que alcanza una posición especificada al desplazarse, después de lo cual se adhiere al lugar indicado (como `fixed`).

Valor por defecto: static.

Ejemplo . Posicionamiento absoluto

Coloquemos el elemento en la esquina superior izquierda de la pantalla con pequeños márgenes:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Ejemplo . Posicionamiento absoluto

Y ahora coloquemos el elemento en la esquina superior derecha de la pantalla con pequeños márgenes:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Ejemplo . Posicionamiento fijo

Con posicionamiento fijo, el elemento permanecerá en su lugar al desplazarse:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Ejemplo . Posicionamiento relativo

Con posicionamiento relativo, el elemento se desplaza en relación a su posición normal, pero los demás elementos se comportan como si el elemento no se hubiera desplazado:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Ejemplo . Anidamiento

Si la propiedad position del padre tiene el valor relative, entonces los elementos con posicionamiento absoluto se posicionarán en relación al padre:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ejemplo . Anidamiento

Si la propiedad position del padre tiene el valor absolute, entonces los elementos con posicionamiento absoluto se posicionarán en relación al padre:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ejemplo . Posicionamiento adherente

Si para un elemento la propiedad position tiene el valor sticky, entonces el elemento se comporta como relative hasta que alcanza una posición especificada al desplazarse, después de lo cual se adhiere al lugar. Hagamos un encabezado adherente:

<h1>Encabezado Principal del Sitio</h1>

<div class="header">encabezado encabezado encabezado</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Ejemplo . Sin posición

Si a un elemento se le asigna posicionamiento absoluto sin especificar la posición, entonces el elemento permanecerá en el lugar donde estaba sin posicionamiento, pero los demás elementos dejarán de detectarlo:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ejemplo . Un eje

Con posicionamiento absoluto se puede especificar la posición solo en un eje. Por ejemplo, si establecemos la propiedad top, verticalmente el elemento se colocará en la posición indicada, pero horizontalmente permanecerá donde estaba:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ejemplo . Todas las posiciones

Con posicionamiento absoluto se pueden especificar posiciones en todos los lados, sin establecer ancho y alto. En este caso, el elemento se colocará en el centro del bloque padre:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Véase también

la propiedad z-index,
que establece la superposición de elementos