18. Posicions i capes

 

Índex | Tema 17 | Tema 19

Introducció

El fet d'especificar vores, marges, farciments i alineacions no altera seqüència vertical de la presentació dels elements de text ni l'horitzontal de les imatges.

En algunes ocasions volem trencar aquesta regularitat; en particular ens pot interessar:

Cal tenir present que els elements que només tenen text són transparents, i si dos o més coincideixen, se'n veuen superposats els continguts. Però si contenen imatges o color de fons, esdevenen opacs. En cas de coincidència, l'element posterior tapa els anteriors; en aquest cas podem parlar de capes.

 

Modificació de la forma de presentació de les imatges.

Si dues o més imatges es troben dins un mateix contenidor (p, td, etc.), i hi ha prou espai, es situen l'una al costat de l'altra, llevat que hi hagi una indicació en contra. Si entre l'una i l'altra situem un element <br />, la posterior passa a situar-se a sota de l'anterior, no pas a la dreta.

D'altra banda també es pot recórrer a diferents elements contenidors d'imatges, un per a cada una: molt sovint es disposa una taula amb les especificacions pertinents, i les imatges es situen en les cel·les adequades.

 

Elements intercalats en un text

La presentació d'un text pot ésser interrompuda per la d'un altre element - imatge o anàleg, o un altre text. Això provoca la interrupció brusca del text, la presentació de l'element inserit a continuació i la posterior represa de l'element interromput.

Aquest comportament pot ésser modificat amb l'especificació float, que té tres valors: left, right i el valor per defecte, none.

Amb els valors left i right l'element afectat s'arrrana a l'esquerra o a la dreta i l'espai sobrant, si n'hi ha, queda lliure per a ésser ocupat:

Exemple

Portat a l'extrem, aquest recurs permet operacions curioses, com ara donar a una llista l'aspecte d'una taula.

Exemple

Però cal insistir un cop més en la necessitat de respectar adequadament la separació dels aspectes estructurals i els formals.

 

Desplaçament dels elements

Podem modificar la posició habitual dels elements amb l'atribut position, que pot tenir quatre valors: static, relative, absolute i fixed.

Quan un element ocupa la posició determinada pel flux de tots els elements anteriors, diem que és static. És l'opció per defecte, i en general no cal especificar-la.

Un element relative es desplaça de la posició que altrament li pertocaria. El desplaçament és fixat per dos paràmetres, top i left. Amb això no s'altera el flux normal dels elements, de manera que el següent element es col·loca just en el punt que hauria ocupat encara que no hi hagués hagut cap desplaçament.

Exemple

L'especificació absolute només es pot fer servir a l'interior d'un contenidor relative. Quan es fa servir, l'element es situa en una posició referida a l'angle superior esquerre de l'element que el conté (vg., un P absolut posicionat dins un DIV amb posició relative es posiciona en relació a aquest).

Exemple

Finalment, un element de posició fixed es situa en una posició fixa en relació a la pantalla, i aquesta no es modifica encara que desplacem el document.

Exemple

 

Nivell z

En l'estàndard del W3C la comesa d'alterar el nivell de les capes és confiat a l'atribut z-index. Aquest consisteix en un nombre que controla l'ordre de superposició de les capes: un valor més alt de z representa una capa superior; un valor més baix, una d'inferior, i això independentment de l'ordre de cada una en la codificació del document. Mitjançant un programa en JavaScript és possible el canvi dels valors dels índexs, molt útil per a documents dinàmics.

Exemple

 

Visibilitat

Amb l'atribut visibility podem fer que una capa sigui visible o invisible:

El valor per defecte és visible.

El canvi entre els dos valors només pot fer-se amb una eina de programació com el JavaScript i és molt útil per a documents dinàmics.

Exemple