Propiedades CSS: posicionamiento, visualización, listas y tablas
Posicionamiento
position: selecciona el posicionamiento con el que se mostrará el elemento.
static* | relative* | absolute* | fixed | inherit
top, right, bottom, left: indican el desplazamiento horizontal y vertical del elemento respecto de su posición original.
unidad de medida | porcentaje | auto | inherit
float: establece el tipo de posicionamiento flotante del elemento.
left | right | none | inherit
clear: indica el lado del elemento que no debe ser adyacente a ninguna caja flotante.
none | left | right | both | inherit
Visualización
display: permite controlar la forma de visualizar un elemento u ocultarlo.
inline | block | none | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
visibility: permite hacer visibles o invisibles a los elementos.
visible | hidden | collapse | inherit
overflow: permite controlar los contenidos sobrantes de un elemento.
visible | hidden | scroll | auto | inherit
z-index: siempre va con position. Establece el nivel tridimensional en el que se muestra el elemento.
auto | número | inherit
div {position: absolute;}
#caja1 {z-index: 5; top: 1em; left: 8em;}Listas
list-style-type: establece el tipo de viñeta para una lista.
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: establece la posición de la viñeta de cada elemento de una lista.
inside | outside | inherit
.lista { list-style-position: outside; }list-style-image: reemplaza las viñetas por una imagen personalizada.
url | none | inherit
ul.flecha { list-style-image: url("imagenes/flecha.png"); }list-style: permite establecer de forma simultánea todas las opciones de una lista.
ul { list-style: url("imagenes/cuadrado_rojo.gif") square inside; }Tablas
border-collapse: define el mecanismo de fusión de los bordes de las celdas adyacentes de una tabla.
collapse | separate | inherit
.normal { border-collapse: collapse; }border-spacing: establece la separación entre los bordes de las celdas adyacentes de una tabla.
unidad de medida | inherit
.ejemp { border-spacing: 4px; }empty-cells: define cómo tratar las celdas vacías de una tabla.
show | hide | inherit
.ejemp2 { empty-cells: hide; }caption-side: establece la posición del título de la tabla.
top | bottom | inherit
.especial { caption-side: bottom; }