posición
Establece el tipo de posicionamiento usado para el objeto.
Sintaxis
{ position: sPosition }
Valores posibles
sPosition
Cadena que especifica o recibe uno de los valores siguientes:
static |
Valor predeterminado. El objeto no tiene ningún posicionamiento especial; sigue las reglas de diseño de HTML. |
absolute |
El objeto se posiciona respecto a la posición del elemento primario, o bien, respecto al objeto body si el elemento primario correspondiente no está posicionado, con las propiedades top y left. |
fixed |
El objeto se posiciona respecto a la ventana del explorador que tiene el contenido. |
relative |
El objeto se posiciona según el flujo normal y después se desplaza según los valores top y left. |
La propiedad tiene el valor predeterminado static. La propiedad de la hoja de estilos en cascada no se hereda.
Observaciones
Si la propiedad se establece en absolute, el objeto se saca del "flujo" del documento y se posiciona sin tener en cuenta el diseño de los objetos que lo rodean. Si otros objetos ya ocupan la posición dada, no afectan al objeto posicionado y este no afecta a estos. En vez de esto, se dibujan todos los objetos en el mismo lugar, lo que provoca una superposición de los objetos. Esta superposición se controla con la propiedad z-index. Los objetos con posicionamiento absoluto no tienen márgenes, aunque sí bordes y espaciado interno.
Para habilitar el posicionamiento absoluto de un objeto, debe especificar al menos una de las propiedades top, bottom, left o right, además de establecer la propiedad position en absolute. En caso contrario, estas propiedades de posicionamiento usarán el valor predeterminado de absolute, que hace que el objeto se represente justo después de los elementos anteriores según las reglas de diseño de HTML.
Si la propiedad se establece en relative, el objeto se coloca según el flujo HTML natural del documento, pero su posición se desplaza según el contenido precedente. En la siguiente sintaxis se muestra cómo crear texto con formato de superíndice, para lo que se coloca el texto en un elemento SPAN que se posiciona respecto al texto restante del párrafo:
<p>The superscript in this name
<span style="position:relative; top:-3px">xyz </span> is "xyz".</p>
El texto y los objetos a continuación de un objeto con posicionamiento relativo ocupan un espacio propio y no se superponen en el espacio natural del objeto posicionado. En cambio, el texto y los objetos que están a continuación de un objeto con posicionamiento absoluto ocupan lo que habría sido el espacio natural del objeto posicionado antes de sacarse del flujo. La colocación de un objeto con posicionamiento absoluto más allá del área visible de la ventana hará que aparezca una barra de desplazamiento. Si se colocan objetos con posicionamiento relativo más allá del área visible, no aparecerá una barra de desplazamiento.
El tamaño del contenido determina el tamaño de los objetos que tienen diseño. Por ejemplo, establecer las propiedades height y position de un objeto DIV le asignará un diseño. El contenido del objeto DIV determina el tamaño. En este caso, el contenido determina el tamaño de width.
Ejemplo
En este ejemplo se usan los valores absolute, static y relative de la propiedad position para cambiar la posición del texto:
<style>
.pitem {position: static}
</style>
<script>
function fnAbsolute(){
ospan.style.position="absolute";
}
function fnRelative(){
ospan.style.position="relative";
}
function fnStatic(){
ospan.style.position="static";
}
</script>
<p>
<span id=ospan class="pitem">This is a span in a paragraph of text.</span>
This is a paragraph of text.</p>
<input onclick="fnRelative()" type=button value ="Relative">
<input onclick="fnAbsolute()" type=button value ="Absolute">
<input onclick="fnStatic()" type=button value ="Static">
Información sobre estándares
Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).
Aplicable a
A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HN, HR, I, IFRAME, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OBJECT, OL, P, RUBY, S, SELECT, SPAN, SUB, TABLE, TD, TH, TR, TT, U, UL, VAR, XMP