El posicionamiento absoluto significa que el elemento se saca completamente del flujo normal del diseño de la página. En lo que respecta al resto de los elementos en la página, el elemento absolutamente posicionado simplemente no existe. El elemento en sí se dibuja por separado, como "encima" de todo lo demás, en la posición que especifique utilizando los atributos left, right, top and bottom
.
Utilizando la posición que especifique con estos atributos, el elemento se coloca en esa posición dentro de su último elemento ancestro que tiene un atributo de posición distinto de static
(los elementos de la página predeterminados son estáticos cuando no se especifica ningún atributo de posición) o el cuerpo del documento (vista del navegador) si no existe tal antecesor.
Por ejemplo, si tuviera este código: 20px
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
... la <div>
se posicionaría desde la parte superior de la ventana del navegador, y 20 píxeles desde el borde izquierdo de la misma.
Sin embargo, si hice algo como esto:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
... 20px entonces el inner
div se coloca desde la parte superior de la outer
div, y 20 píxeles desde el borde izquierdo de la misma, debido a que la outer
div no se coloca con position:static
porque lo hemos configurado explícitamente para usar position:relative
.
El posicionamiento relativo, por otro lado, es como no indicar ningún posicionamiento en absoluto, pero el left, right, top and bottom
atributos "empuja" el elemento fuera de su diseño normal.El resto de los elementos en la página aún se distribuyen como si el elemento estuviera en su lugar normal.
Por ejemplo, si tuviera este código:
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
... entonces los tres elementos <span>
se sentaban uno al lado del otro sin solaparse.
Si fijo el segundo <span>
a utilizar el posicionamiento relativo, como esto:
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>
... entonces SPAN2 coincidiría en el lado derecho de la casilla de verificación Período1 por 5px. Span1 y Span3 se ubicarían exactamente en el mismo lugar que en el primer ejemplo, dejando un espacio de 5px entre el lado derecho de Span2 y el lado izquierdo de Span3.
Espero que aclare las cosas un poco.
[La propiedad 'posición'] (http://www.w3.org/TR/CSS21/visuren.html#propdef-position) en CSS 2.1. –
@rolfl Hm, ¿esta edición fue realmente necesaria en una pregunta de 3 años? Lo habría llamado "demasiado pequeño". –
@MrLister Apareció en una cola de revisión de 'edición sugerida' ... No noté la edad. Pero, si se tratara de una pregunta de 60 segundos de antigüedad, ¿hubiera marcado la diferencia? – rolfl