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.

Aquest problema només es planteja quan dues o més imatges es troben dins un mateix element contenidor. En aquest cas n'hi ha prou de recórrer a un simple <br />. En general, però, el que es fa és actuar sobre els elements contenidors, per exemple una taula amb cel·les que contenen imatges.

 

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, dos de contextuals i dos d'absoluts.

Els valors contextuals condicionen la posició dels elements a les característiques intrínseques d'aquests i a les especificacions de posició:

Exemple

Els valors absoluts no tenen en present el context, i tampoc no condicionen ela posició dels altres elements.

Exemple

 

Nivell z

El Netscape va desenvolupar les eines ILAYER i LAYER com elements bàsics en l'establiment d'un sistema de capes, però aquest recurs no arribà a formar part de l'estàndard reconegut pel W3C i fou abandonat en passar de la generació 4.x al Netscape 6.0. El sistema que s'explica a continuació, basat en especificacions CSS funciona amb l'Explorer 5 i amb el Netscape 6 i següents, i amb el successor d'aquests, el Firefox.

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