Una vez te has familiarizado ya con el modelo de cajas y con el modo de flotarlas, se hace necesario estudiar los modelos de posicionamiento y del formato visual para poder tener una visión completa de cómo se organizan los elementos en una página. Para ello vamos a ver algunas de las propiedades que nos permiten organizar los elementos:

display

Esta propiedad permite al documento interpretar de otra forma los elementos de tipo bloque y los elementos de tipo línea. Para ello basta con que asignes a esta propiedad el valor block si quieres que un elemento "en línea" se comporte como un elemento de tipo bloque y none, si quieres que un elemento de bloque no genere caja, no muestre su contenido y no ocupe espacio en la página.

position

Permite posicionar los elementos en un documento. Esta propiedad admite cinco valores:

• static que permite colocar los elementos según el flujo normal. Es el valor que asumirá por defecto en todos los elementos HTML.
• relative que permite dejar el elemento exactamente donde está. Un elemento posicionado de esta forma se puede cambiar desde su punto de partida estableciendo para ello una distancia vertical y/o horizontal. En el siguiente ejemplo se desplaza la "caja2" 50px del extremo izquierdo y 50 px del extremo superior de su posición relativa.

Ejemplo:

• #caja2 {width: 130px; height: 130px;
          background-color:#00FF00;
          border: solid 1px black;
          margin: 10px;
          /* Posicionamento relativo */
          position: relative;
          left: 50px; top: 50px; }

• absolute permite abandonar el flujo normal del haciendo que el elemento no ocupe ningún espacio de forma que el resto de elementos del flujo normal actuarán como si el elemento no estuviese allí. El modo de determinar el origen de coordenadas de nuestro elemento será el siguiente:
  • Si el elemento posicionado de modo absoluto no está contenido dentro de ningún otro, su origen de coordenadas se mide respecto a la esquina superior izquierda del body (contenedor principal).
  • Si el elemento posicionado de modo absoluto está contenido dentro de otro elemento, el origen de coordenadas del elemento se calculan con respecto a la posición de la esquina superior izquierda del elemento que lo contiene.
• fixed funciona de forma parecida al posicionamiento absoluto pero posiciona con respecto a la ventana del navegador apareciendo en la misma posición aunque el usuario se desplace por la página con las barras de desplazamiento.

visibility

Esta propiedad controla si el elemento será visualizado según le asignes el valor visible o hidden. Debes tener en cuenta que, aunque un elemento no sea visible, éste continúa ocupando su espacio en el flujo normal del documento al contrario de lo que ocurría con la propiedad display cuando se le asignaba el valor none.

z-index

Permite controlar el orden en el que se presentan los elementos que quedan solapados por efecto de otras propiedades. Si cuando definimos algún elemento con posición absoluta, éste tiene que visualizarse en el mismo lugar ocupado por otro elemento, se producirá una superposición de elementos visualizándose, en la parte coincidente, sólo el que está ocupando la "posición superior". La propiedad z-index permite especificar el orden en el eje z de los elementos, esto es, el orden de apilamiento en capas del documento.

Por defecto, los elementos se apilan en el orden en que aparecen: el elemento situado más abajo en el flujo normal del documento quedará encima. Si quieres que esta posición no sea tenida en cuenta, debes saber que los elementos con un valor mayor de la propiedad z-index son colocados encima de los que tienen un valor menor z-index, quedando estos últimos tapados por los primeros.

También debes saber que esta propiedad sólo se aplica a elementos que tengan la propiedad position absolute o en relative.