Posición y flotado
Tabla de contenidos
bottomclearfloatleftpositionrighttopz-index
bottom
- Descripción
- Indica la distancia entre la arista inferior de un elemento y la arista inferior del elemento que lo contiene para elementos posicionados de manera fija o absoluta. Para elementos posicionados relativamente, indica la misma distancia pero con respecto a la caja creada por el elemento en el flujo normal del documento.
- Valores posibles
-
- Una medida absoluta, relativa o porcentual. El procentaje se refiere a la altura del elemento contenedor.
auto: El agente de usuario calcula automáticamente este valor.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
auto.- Aplicable a
- Elementos posicionados.
- ¿Heredada?
- No.
- Notas
- No se aplica si se ha asignado
position:static al elemento.
Ver ejemplos de los valores de bottom.
clear
- Descripción
- Indica el lado o los lados del elemento en los que no se permite que floten otros elementos.
- Valores posibles
-
left: right: both: none: Permite que los demás elementos floten a ambos lados.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
none.- Aplicable a
- Elementos de bloque.
- ¿Heredada?
- No.
Para más información sobre clear, ver más adelante la sección «Más sobre posición y flotado».
float
- Descripción
- Indica el lado en que el elemento flota; el resto de elementos al mismo nivel se adaptan a su contorno.
- Valores posibles
-
left: El elemento se posiciona flotado a la izquierda dentro de su bloque contenedor.right: El elemento se posiciona flotado a la derecha dentro de su bloque contenedor.none: El elemento no flota, por lo que se vuelve a colocar en su posición asignada en el flujo normal del documento.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
none.- Aplicable a
- Todos los elementos, excepto a aquellos a los que se ha aplicado
position con un valor de absolute o fixed; en estos casos, si se aplica float, al posicionarse el elemento su flotado se restablece a none.
- ¿Heredada?
- No.
- Notas
- Cuando un elemento se flota, el resto del contenido con el que comparte contenedor se reposiciona ajustándose a él. Sin embargo, a efectos del cálculo del tamaño automático del contenedor, el elemento desaparece del flujo del documento, por lo que si un elemento sólo contiene elementos flotados, a efectos de establecer sus dimensiones es como si no contuviese elemento alguno.
Para más información sobre flotado de elementos, ver más adelante la sección «Más sobre posición y flotado».
left
- Descripción
- Indica la distancia entre la arista izquierda de un elemento y la arista izquierda del elemento que lo contiene para elementos posicionados de manera fija o absoluta. Para elementos posicionados relativamente, indica la misma distancia pero con respecto a la caja creada por el elemento en el flujo normal del documento.
- Valores posibles
-
- Una medida absoluta, relativa o porcentual. El procentaje se refiere a la anchura del elemento contenedor.
auto: El agente de usuario calcula automáticamente este valor.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
auto.- Aplicable a
- Elementos posicionados.
- ¿Heredada?
- No.
- Notas
- No se aplica si se ha asignado
position:static al elemento.
Ver ejemplos de los valores de left.
position
- Descripción
- Especifica el tipo de posicionamiento de un elemento.
- Valores posibles
-
static: El elemento ocupa la posición que le corresponde según el flujo normal del documento.relative: El elemento se sitúa en una posición relativa a la que ocupa en el flujo del documento, aunque el bloque original generado para albergarlo sigue afectando al flujo del contenido.absolute: El elemento se sitúa en una posición absoluta, es decir, se saca del flujo del documento, por lo que su posición deja de afectar al resto del contedio del documento..fixed: Como absolute, pero además el elemento queda fijo, lo que para un medio de pantalla significa que se presenta siempre en la misma posición de la ventana en la que se presenta y no se ve afectado por el desplazamiento de la barra de scroll.1inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
static.- Aplicable a
- Todos los elementos.
- ¿Heredada?
- No.
Para más información sobre posicionado de elementos, ver más adelante la sección «Más sobre posición y flotado».
right
- Descripción
- Indica la distancia entre la arista derecha de un elemento y la arista derecha del elemento que lo contiene para elementos posicionados de manera fija o absoluta. Para elementos posicionados relativamente, indica la misma distancia pero con respecto a la caja creada por el elemento en el flujo normal del documento.
- Valores posibles
-
- Una medida absoluta, relativa o porcentual. El procentaje se refiere a la anchura del elemento contenedor.
auto: El agente de usuario calcula automáticamente este valor.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
auto.- Aplicable a
- Elementos posicionados.
- ¿Heredada?
- No.
- Notas
- No se aplica si se ha asignado
position:static al elemento.
Ver ejemplos de los valores de right.
top
- Descripción
- Indica la distancia entre la arista superior de un elemento y la arista superior del elemento que lo contiene para elementos posicionados de manera fija o absoluta. Para elementos posicionados relativamente, indica la misma distancia pero con respecto a la caja creada por el elemento en el flujo normal del documento.
- Valores posibles
-
- Una medida absoluta, relativa o porcentual. El procentaje se refiere a la altura del elemento contenedor.
auto: El agente de usuario calcula automáticamente este valor.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
auto.- Aplicable a
- Elementos posicionados.
- ¿Heredada?
- No.
- Notas
- No se aplica si se ha asignado
position:static al elemento.
Ver ejemplos de los valores de top.
z-index
- Descripción
- Indica el nivel de apilamiento de un elemento cuando se da el caso de que varios elmentos se superpongan. Es la posición que ocupa el elemento en un imaginario eje z que se proyecta desde el documento hacia el ojo del usuario.
- Valores posibles
-
- Un número entero. Los valores más altos sitúan los elementos en un plano por encima de los elementos con valores más bajos.
auto: El valor asignado es el mismo que el del elemento padre.inherit: El elemento hereda el valor del elemento padre para esta propiedad.
- Valor por defecto
auto.- Aplicable a
- Elementos posicionados.
- ¿Heredada?
- No.
Ver ejemplos de los valores de z-index.
Notas
- Este comportamiento se aplica por tanto a los medios
handheld, projection, screen, tty, y tv. Para impresión —media="print"—, significa que se imprime en cada página en la posición establecida. Para el resto de medios, la especificación explícitamente dice que aún no se ha definido el modo de representación (inglés). 
