HTML and CSS Reference
In-Depth Information
Figura 4.7
- Il CSS applicato al nostro markup produce una struttura simile a quella che
avevamo stilizzato nell'immagine precedente.
È importante notare che la dimensione data agli elementi può influenzare, se omessa, il mo-
do in cui gli elementi stessi vengono renderizzati dal browser. Nel corso del prossimo ca-
pitolo, verrà introdotto, inoltre, il concetto di box model, che è essenziale per capire come
funzioni l'allocazione dello spazio, dei margini e del bordo da parte di CSS.
Quanto abbiamo visto finora rientra nell'ambito del posizionamento relativo degli elemen-
ti. A parte casi particolari, il posizionamento assoluto resta il migliore degli approcci, per-
ché in HTML è anche importante, ai fini di browser non convenzionali (motori di ricerca,
browser vocali) che il contenuto sia posizionato nella pagina in base all'importanza dello
stesso.
Ad ogni modo, in alcuni scenari, soprattutto quando ci sono da comporre layout molto
complessi (oppure con elementi animati), la possibilità di posizionare in maniera assoluta
gli elementi sulla superficie ritorna molto comoda. In particolare, è necessario prestare at-
tenzione al fatto che, in questi casi, gli elementi potrebbero trovarsi sovrapposti e, quindi,
nascondersi a vicenda. Diamo subito un'occhiata al codice
dell'esempio 4.19
.
Esempio 4.19
.edit {
position: absolute;
z-index: 99;
top: 1px;
left: 1px;
background: red;
}
Dobbiamo prestare attenzione alle prime quattro istruzioni:
position
: di default assume come valore
relative
, ma con
absolute
siamo
in grado di dare all'elemento la possibilità di essere posizionato in maniera assolu-
ta;
z-index
: gestisce l'indice dell'elemento sull'ipotetico piano
z
, aiutandoci a gestire
elementi in primo piano e in secondo piano;
