Ubicando elementos usando CSS (1ª parte)

Todos los elementos de una página web son rectángulos. Cuando agregamos alguno, lo que hacemos es decirle al navegador que cree un área rectangular con un cierto contenido. Algunos de esos elementos son bloques, es decir, se separan del elemento inferior con un salto de línea (se apilan) y otros no lo son (inline), no se separan, se colocan uno al lado del otro.

Por ejemplo, si agregamos dos imágenes y escribimos:

<img src="imagen1" /><img src="imagen2" />

Se mostrarán una al lado de la otra porque IMG es un elemento inline.

Sin embargo, si colocamos cada una dentro de un DIV, se mostrarán una debajo de la otra porque DIV es un elemento de tipo block.

<div><img src="imagen1" /></div><div><img src="imagen2" /></div>

Usando la propiedad display, podemos establecer el comportamiento de un elemento así, que, podríamos hacer que una etiqueta que normalmente es inline se comporte como block:

<img style="display:block;" src="imagen1" /><img style="display:block;" src="imagen2" />

Y viceversa:

<div style="display:inline;"><img src="imagen1" /></div>
<div style="display:inline;"><img src="imagen2" /></div>

Esto no es cierto, puede decir alguien; puse dos imágenes comunes y sin agregar propiedades, aparecieron una debajo de otra ¿hay algún un error?

No, no es un error, lo que ocurre es que, si el espacio necesario para contener ambas imágenes es menor que la suma del ancho de las mismas, el navegador empuja la segunda hacia bajo.

Veamos una simulación de ejemplo. Estas dos imágenes tienen 120x90 pixeles. Las coloco dentro de un bloque DIV que tiene 400 pixeles de ancho con un código así:

<div style="width:400px;">
<img src="imagen1" /><img src="imagen2" />
</div>

Ahora, voy a hacer lo mismo pero el bloque DIV será más chico, digamos 200 pixeles de ancho:

<div style="width:200px;">
<img src="imagen1" /><img src="imagen2" />
</div>

Como la segunda no tiene lugar, se desplaza hacia abajo:

Pero ¿y si quiero que se superpongan? ¿acaso en una página web dos elementos pueden ocupar el mismo espacio contradiciendo las leyes de la física? La respuesta es sí. En CSS hay propiedades que controlan la posición de los elementos; para eso, primero lo debemos indicar agregando position:relative; y luego, con las propiedades left y top podemos modificar la posición ... pero eso será mañana.