Ultimo aggiornamento: 28/04/2016

CSS fornisce funzionalità di posizionamento degli elementi, il che significa che possiamo posizionare un elemento in una posizione specifica della pagina.

La proprietà principale che controlla il posizionamento nei CSS è la proprietà position. Questa proprietà può assumere uno dei seguenti valori:

statico: posizionamento dell'elemento standard, valore di default

assoluto : l'elemento è posizionato rispetto ai limiti dell'elemento contenitore, a meno che la sua proprietà position non sia uguale a static

relativo : l'elemento è posizionato rispetto alla sua posizione predefinita. In genere, lo scopo principale del posizionamento relativo non è quello di spostare un elemento, ma di impostare un nuovo punto di ancoraggio per il posizionamento assoluto degli elementi nidificati.

fisso : l'elemento è posizionato rispetto alla finestra del browser, questo permette di creare elementi fissi che non cambiano posizione durante lo scorrimento

Non dovresti applicare contemporaneamente la proprietà float e qualsiasi tipo di posizionamento diverso da statico (ovvero il tipo predefinito) a un elemento.

Posizionamento assoluto

La finestra del browser ha i bordi superiore, inferiore, destro e sinistro. Per ciascuno di questi quattro bordi, esiste una proprietà CSS corrispondente: sinistra (margine sinistro), destra (margine destro), superiore (margine superiore del contenitore) e inferiore (margine inferiore). I valori di queste proprietà sono specificati in pixel, ems o percentuali. Non è necessario impostare valori per tutti e quattro i lati. Di norma, vengono impostati solo due valori: il rientro dal bordo superiore della parte superiore e il rientro dal bordo sinistro di sinistra.

CIAO MONDO

Qui, il div posizionato in modo assoluto sarà 100px a sinistra del bordo della vista e 50px dal basso.

Non è così importante che dopo questo elemento div ci siano altri elementi. Questo blocco div sarà comunque posizionato rispetto ai confini del viewport del browser.

Se un elemento posizionato in modo assoluto si trova in un altro contenitore, che a sua volta ha un valore della proprietà position diverso da static , l'elemento viene posizionato rispetto ai limiti del contenitore:

Posizionamento relativo

Anche il posizionamento relativo viene impostato utilizzando il valore relativo. Per specificare la posizione specifica in cui l'elemento viene spostato, vengono applicate le stesse proprietà in alto, a sinistra, a destra e in basso:

proprietà z-index

Per impostazione predefinita, quando due elementi di bordo corrispondono, l'ultimo elemento definito nel markup html viene visualizzato sopra l'altro. Tuttavia, la proprietà z-index consente di modificare l'ordine degli elementi quando si sovrappongono. La proprietà prende un numero come valore. Gli elementi con un valore più alto per questa proprietà appariranno sopra gli elementi con un valore z-index inferiore.

Per esempio:

Ora aggiungiamo una nuova regola allo stile del blocco redBlock:

RedBlock( z-index: 100; posizione: assoluta; in alto: 20px; sinistra: 50px; larghezza: 80px; altezza: 80px; colore di sfondo: rosso; )

Qui lo z-index è 100. Ma non deve essere 100. Poiché il secondo blocco non ha z-index ed è in realtà zero, possiamo impostare la proprietà z-index del redBlock su qualsiasi valore maggiore di zero.

E ora il primo blocco sarà sovrapposto al secondo, e non viceversa, come all'inizio.

Quando si lavora con il testo, l'utente potrebbe dover scambiare frasi o interi paragrafi o disporre frammenti in modo non standard. Esistono diversi modi per spostare un blocco di testo in Microsoft Office Word.

Istruzione

È necessario spostare (trascinare, capovolgere, ecc.) 3 blocchi di fondazione 300x600x2400 di almeno 3-5 metri. Il problema è che si trovano dietro casa e non c'è accesso per una gru o altre attrezzature speciali.
Successivamente ho voluto utilizzare i blocchi per la realizzazione di una veranda. Ma ora ho solo bisogno di fare spazio su cui giacciono: lì progetto un pergolato a baldacchino.
Il peso di ciascuno (se ho contato correttamente) è di circa 1 tonnellata. Ci sono pensieri su questo?

Sì, non è facile, ma fattibile. Abbiamo preso un normale cric per auto con mio suocero e alcuni, a quanto pare, tubi da due pollici e rottami. Anche i nostri tre blocchi erano in una posizione scomoda, li abbiamo spostati di 15 metri.Abbiamo fatto questo: era far oscillare la sua leva. Un piccolo pezzo di tavola piatta è stato posizionato sul fondo del foro in modo da non macchiare il martinetto e in modo che non si attaccasse al terreno sotto carico. Quindi, abbastanza decentemente, hanno sollevato il blocco da un bordo, spingendolo dal basso con un martinetto. Non so esattamente a quale angolo, rispetto al suolo, ma in modo che diversi tagli di tubi di mezzo metro possano essere posizionati uniformemente sotto il blocco. Quindi il martinetto è stato abbassato e il blocco è stato posato sui tubi e livellato rispetto alla superficie della terra. Inoltre, nel tratto più lungo del tubo (~ 1,8 m), che non era posto sotto il blocco, è stato inserito un piede di porco (per rigidità) e questo ibrido è stato utilizzato come leva, martellandolo sotto l'altra estremità del blocco e sollevandolo rispetto al suolo (aumentando l'angolo tra la leva e il suolo) spingeva il blocco come se fosse lontano da se stessi. Il principio di spostare i blocchi delle piramidi egizie. Solo al posto dei tronchi, i tubi venivano usati come rulli. Se il terreno è liquido, puoi prima, prima di abbassare il martinetto, mettere lunghe tavole piatte sotto i tubi in modo che i tubi non scavino sotto il peso del blocco. Spingiamo, senza dimenticare di mettere una nuova pipa sotto il "naso" del bozzello, e prepariamo la pipa rilasciata da sotto la "poppa" come quella successiva sotto il naso.
In totale, abbiamo fatto rotolare questi blocchi con una durata di 3 anni ogni estate fino a quando non li abbiamo fatti rotolare fino al cancello. Tutti hanno pensato a come usarli, ma non si sono inventati. Hanno ordinato un manipolatore, lui li ha caricati su di sé proprio al cancello e li ha portati fuori in una direzione sconosciuta, a pagamento
Le difficoltà sorgono a turno se esistono, ma tutto è fattibile anche se si eliminano i tubi sotto il blocco con una mazza, impostandoli nella direzione e regolando la posizione del blocco con una leva dai lati. Sembra solo pesante, e poi ci si abitua.

PS L'argano, che abbiamo acquistato appositamente per questi blocchi, ha aiutato molto. Il gancio dell'argano può essere agganciato ai paletti della recinzione (i nostri reggono normalmente) e l'argano può tirare i blocchi attraverso i tubi a questi paletti. Il blocco dovrebbe avere 2 alette di rinforzo e l'argano è stato agganciato su di esse. È più facile che spingere con una leva, ma ci vuole più tempo e anche molta forza: tutto il tempo per correre per riattaccare l'argano al palo successivo.

P.P.S. Spiegato come meglio poteva Se questo - mi dispiace.

Dall'autore: Saluti. Il posizionamento degli elementi CSS è un argomento molto importante nella creazione di siti Web. In questo articolo, propongo di considerare più in dettaglio tutti i modi per spostare i blocchi all'interno di una pagina web.

Quali sono i tipi

Se parliamo del posizionamento degli elementi del blocco, viene impostato utilizzando la proprietà position. Ha quattro significati e ciascuno merita una considerazione separata.

Posizionamento assoluto

Questa è la prima specie conosciuta. È impostato in questo modo: posizione: assoluto. Successivamente, il blocco perde le sue solite proprietà e cade completamente fuori dal flusso normale. Cos'è questo flusso? Prova a mettere in fila diversi elementi a livello di blocco nel markup. Come diventeranno? Uno dopo l'altro, e nient'altro.

Questo è il comportamento normale dei blocchi per impostazione predefinita. Ma cosa succede a un blocco che ha un posizionamento assoluto definito? Esce completamente dal flusso normale, altri blocchi semplicemente smettono di notarlo, come se non fosse mai esistito, ma l'elemento rimane sulla pagina. Il posizionamento assoluto in CSS viene spesso utilizzato per posizionare con precisione elementi decorativi, icone e altre chicche.

Ora può essere spostato utilizzando le proprietà sinistra, destra, in alto e in basso. Per impostazione predefinita, lo spostamento si verifica rispetto ai bordi della finestra del browser, ma se l'elemento padre è impostato su position: relativo, l'offset si verifica rispetto al blocco padre.

Blocco( posizione: assoluta; in basso: 0; a destra: 0; )

L'elemento verrà spostato nell'angolo inferiore destro. Noto che questo è spesso il modo in cui fanno il pulsante su: lo posizionano assolutamente nell'angolo. Ed ecco un altro esempio in cui mostrerò prima il possibile markup:

E ora gli stili CSS per questo frammento:

#wrapper( posizione: relativa; ) .block( posizione: assoluta; in alto: 0; a destra: 10px; )

In questo esempio, abbiamo prima registrato il posizionamento relativo del contenitore padre (relativo - ne parleremo più avanti nell'articolo), quindi abbiamo impostato la posizione assoluta per lo stesso elemento .block. Di conseguenza, le coordinate non verranno contate dalla finestra del browser stessa, ma dai bordi dell'elemento padre, ovvero il blocco wrapper.

Posizionamento relativo degli elementi CSS

Questa è la vista successiva ed è scritta in questo modo: posizione: relativa. Le coordinate sono specificate dalle stesse proprietà della posizione assoluta. L'unica differenza significativa è che l'elemento non esce formalmente dal flusso: c'è spazio per esso.

Il funzionamento di questo valore può essere paragonato alla visibilità: nascosto, quando l'elemento è nascosto dalla pagina, ma il posto sottostante rimane intatto. Lo stesso accade con il posizionamento relativo: il blocco può essere spostato ovunque, ma il posto sottostante rimane vuoto e non sarà occupato da altre parti.

È anche importante sapere che l'offset non proviene dai bordi della finestra del browser web, ma dal punto in cui si trovava originariamente il blocco. Cioè:

Blocca( posizione: relativa; in alto: 10px; a destra: 50px; )

Il blocco si sposterà di 50 pixel a destra e di 10 pixel a sinistra.

Fissazione

Sicuramente su Internet hai visto più di una volta su siti quando, durante lo scroll, un banner non è scomparso, ma ha continuato a essere nella tua zona di visibilità, come se si attaccasse a un punto. Ciò viene principalmente implementato utilizzando il posizionamento fisso. Per fare ciò, devi scrivere:

Posizione: posizione statica o regolare

L'ultima vista è statica, che è il comportamento normale degli elementi a livello di blocco. Non ha bisogno di essere scritto, perché è l'impostazione predefinita, ma è comunque necessario conoscere il quarto valore. A volte position: static viene scritto per sovrascrivere un diverso tipo di posizionamento su determinati eventi sulla pagina web.

Come rendere corretto il posizionamento dei blocchi in CSS?

Abbiamo considerato i significati, ma questo non basta per chiudere questo argomento per noi stessi. In realtà, devi capire dove e quali tipi di posizionamento devi applicare. Con fixed, ti ho già fornito un esempio: può essere utilizzato per creare barre laterali, intestazioni o piè di pagina appiccicosi.

Il posizionamento relativo può essere d'aiuto quando si desidera spostare un blocco leggermente rispetto alla sua posizione e mantenerlo comunque nel flusso. È inoltre impostato sui blocchi padre per utilizzare il movimento assoluto per gli elementi figlio.

Altre tecniche: centraggio, blocchi flottanti

La proprietà position non risolve tutti i problemi con il posizionamento degli elementi di blocco. Come creeresti, ad esempio, una griglia del sito con esso? Non ho buone idee. È qui che le altre funzionalità tornano utili.

Con l'aiuto di float in css, vengono spesso create delle griglie. La proprietà consente di spingere il blocco sul bordo sinistro o destro del genitore (float: sinistra, float: destra), consentendo a più elementi di blocco di diventare in una riga, cosa che si verifica molto spesso in qualsiasi sito.

La centratura viene eseguita in questo modo: il blocco deve scrivere una certa larghezza, quindi impostare la proprietà margin: 0 auto. È il valore automatico che lo allineerà orizzontalmente esattamente al centro. Naturalmente, per questo deve essere l'unico della sua linea, altrimenti non funzionerà nulla.

Tutti i tipi di posizionamento elencati in questo articolo possono essere utili a uno sviluppatore web. Da qualche parte è necessario inserire l'icona (posizione: assoluta), da qualche parte, correggere leggermente la posizione del blocco, lasciando un posto dietro di esso (posizione: relativa) e dove dovrebbe essere fissato il widget (posizione: fisso). In generale, la conoscenza di questa proprietà non sarà sicuramente superflua.

Bene, per imparare ancora di più dal mondo della costruzione di siti, assicurati di iscriverti al nostro blog e ottenere nuovi materiali di formazione. E ti consiglio anche di guardare il nostro, dove viene sollevato anche un argomento simile. (elementi di posizionamento)

Vlad Merzevich

Il posizionamento è la posizione di un elemento in un sistema di coordinate. Esistono quattro tipi di posizionamento: normale, assoluto, fisso e relativo. A seconda del tipo, impostato tramite la proprietà position, cambia anche il sistema di coordinate.

Grazie alla combinazione delle proprietà position , left , top , right e bottom, un elemento può essere impilato uno sopra l'altro, renderizzato in un punto con determinate coordinate, fissato in una posizione specificata, determinare la posizione di un elemento relativo a un altro e altro Come altre proprietà CSS, il controllo del posizionamento è disponibile tramite script. Pertanto, puoi modificare dinamicamente la posizione degli elementi senza ricaricare la pagina, creando animazioni ed effetti vari.

Posizionamento normale

Se la proprietà position dell'elemento non è impostata o il suo valore è static , l'elemento viene visualizzato normalmente nel flusso del documento. In altre parole, gli elementi appaiono sulla pagina nell'ordine in cui appaiono nel codice sorgente HTML.

Le proprietà left , top , right , bottom, se definite, vengono ignorate.

Posizionamento assoluto

Con il posizionamento assoluto, l'elemento non esiste nel flusso del documento e la sua posizione è relativa ai bordi del browser. È possibile impostare questo tipo tramite il valore assoluto della proprietà position. Le coordinate sono specificate rispetto ai bordi della finestra del browser, chiamata "area visibile" (Fig. 3.42).

Riso. 3.42. Valori delle proprietà sinistro, destro, superiore e inferiore per il posizionamento assoluto

La modalità ha le seguenti caratteristiche.

• La larghezza del livello, se non impostata in modo esplicito, è uguale alla larghezza del contenuto più i valori di margine, bordo e riempimento.
• Un livello non cambia la sua posizione originale a meno che non abbia le proprietà destra , sinistra , in alto e in basso.
• Le proprietà sinistra e superiore hanno la precedenza sulle proprietà destra e inferiore. Se sinistra e destra si contraddicono, il valore di destra viene ignorato. Lo stesso vale per il fondo.
• Se left è impostato su un valore negativo, il livello andrà oltre il bordo sinistro del browser e la barra di scorrimento non verrà visualizzata. Questo è un modo per nascondere un elemento alla vista. Lo stesso vale per la proprietà top, solo il livello andrà oltre il bordo superiore.
• Se sinistra è impostata su un valore maggiore della larghezza dell'area visibile, o impostata a destra con un valore negativo, apparirà una barra di scorrimento orizzontale. La stessa regola vale per top , tranne per il fatto che stiamo parlando di una barra di scorrimento verticale.
• Le proprietà sinistra e destra specificate contemporaneamente formano la larghezza del livello, ma solo se la larghezza non è specificata. Vale la pena aggiungere la proprietà width e il valore di right verrà ignorato. Lo stesso accadrà con l'altezza del livello, solo le proprietà top , bottom e height sono già coinvolte.
• Un elemento posizionato in modo assoluto si sposta con il documento mentre scorre.

La proprietà position, impostata su Absolute, può essere utilizzata per creare l'effetto dei frame. Oltre al posizionamento assoluto, agli elementi deve essere assegnata una proprietà di overflow con valore auto . Quindi, quando il contenuto supera l'altezza dell'area visibile, apparirà una barra di scorrimento. L'altezza e la larghezza dei "frame" vengono generate automaticamente utilizzando contemporaneamente le proprietà left , right per la larghezza e top , bottom per l'altezza (esempio 3.31).

Esempio 3.31. Creazione di un analogo di frame

Il risultato di questo esempio è mostrato in Fig. 3.43. Il livello dell'intestazione viene visualizzato nel flusso come al solito e i livelli della barra laterale e del contenuto sono impostati sul posizionamento assoluto.

Riso. 3.43. Applicazione del posizionamento assoluto

In IE6, gli elementi posizionati in modo assoluto non possono avere le proprietà left , right e top , bottom impostate contemporaneamente.

Il posizionamento assoluto viene utilizzato anche per creare vari effetti, come i suggerimenti delle foto. A differenza dell'attributo title del tag che visualizza anche il testo del tooltip, tramite gli stili è possibile controllare l'aspetto del testo visualizzato utilizzando lo script.

Innanzitutto, creiamo un livello vuoto con un ID floatTip e definiamo il suo stile. Devono essere richieste tre proprietà di stile: posizione impostata su absolute , display impostato su nessuno nasconde il livello e larghezza imposta la larghezza del livello di descrizione comando. Le restanti proprietà vengono utilizzate su richiesta dello sviluppatore e hanno lo scopo di modificare il design del livello (esempio 3.32).

Esempio 3.32. Stile descrizione comando

#floatTip ( posizione: assoluta; /* Posizionamento assoluto */ larghezza: 250px; /* Larghezza blocco */ display: nessuno; /* Nascosto dalla vista */ bordo: 1px solido #000; /* Opzioni bordo */ riempimento: 5px ; /* Margine intorno al testo */ famiglia di caratteri: sans-serif; /* Carattere seghettato */ dimensione carattere: 9pt; /* Dimensioni carattere */ colore: #333; /* Colore testo */ sfondo: #ECF5E4; /* Colore di sfondo */ )

Lo script stesso è costituito da due funzioni: moveTip() tiene traccia del movimento del mouse e cambia la posizione del livello in base alle coordinate del cursore, e toolTip() controlla la visibilità del livello e visualizza il testo desiderato al suo interno (esempio 3.33).

Esempio 3.33. Script di output del livello

document.onmousemove = moveTip; funzione moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Larghezza livello // Per IE if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Per altri browser) else ( x = e.pageX; // Coordinata X del cursore y = e.pageY; // Coordinata Y del cursore) // Mostra il livello a destra del cursore se ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Per comodità e versatilità, lo script dovrebbe essere spostato in un file separato e collegato tramite l'attributo src del tag

Obiettivo "+": Canon EF 24-105 f/4L IS USM
Flash "+": Canon Speedlite 580 EX
"+" Velocità dell'otturatore: 1/125
Apertura: 5,6")" onmouseout="toolTip()" />

Il risultato di questo esempio è mostrato in Fig. 3.44. Si noti che il ritorno a capo del testo quando si chiama la funzione toolTip() viene eseguito per la leggibilità e ha la sintassi JavaScript. In Safari, lo script a volte non funziona durante il wrapping del testo, nel qual caso il testo dovrebbe essere scritto su una riga. La proprietà di opacità CSS3 è stata aggiunta agli stili, che aggiunge un po' di trasparenza al livello. Prima di IE 9.0 questa proprietà non è supportata.

Riso. 3.44. Descrizione comando renderizzata con JavaScript

Posizione fissa

La posizione fissa di un livello è impostata dal valore della posizione della proprietà fissa ed è simile al posizionamento assoluto. Ma a differenza di esso, è attaccato al punto sullo schermo specificato dalle proprietà left , top , right e bottom e non cambia la sua posizione durante lo scorrimento della pagina web. Un'altra differenza rispetto all'assoluto è che quando un livello fisso va oltre l'area visibile a destra o al di sotto di essa, non vengono visualizzate barre di scorrimento.

Questo tipo di posizionamento viene utilizzato per creare menu, schede, intestazioni, in generale, eventuali elementi che devono essere fissati nella pagina e sempre visibili al visitatore. L'esempio 3-35 mostra l'aggiunta di un piè di pagina che rimane nella stessa posizione indipendentemente dalla quantità di informazioni sul sito.

Esempio 3.35. Cantina fissa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Il risultato dell'esempio è mostrato in Fig. 3.45. Poiché il piè di pagina fisso si sovrappone e nasconde il testo, è stato aggiunto un riempimento inferiore per il selettore BODY. IE6 non supporta il valore fisso, quindi questo esempio non funzionerà correttamente in quel browser.

Riso. 3.45. Piè di pagina in fondo alla pagina

Posizionamento relativo

L'impostazione della proprietà position su relativa imposta la posizione dell'elemento rispetto alla sua posizione originale. L'aggiunta delle proprietà left , top , right e bottom cambia la posizione dell'elemento e lo sposta da un lato o dall'altro rispetto alla sua posizione originale. Un valore sinistro positivo definisce un offset a destra del bordo sinistro dell'elemento, un valore negativo specifica un offset a sinistra. Un valore positivo di top imposta lo spostamento dell'elemento verso il basso (Fig. 3.46), un valore negativo - uno spostamento verso l'alto.

Riso. 3.46. Valori delle proprietà a sinistra e in alto per il posizionamento relativo

Le proprietà in basso e a destra hanno l'effetto opposto. Se il valore è positivo, destra sposta l'elemento a sinistra del suo bordo destro, se è negativo, si sposta a destra (Fig. 3.47). Un valore inferiore positivo sposterà l'elemento in alto e un valore negativo lo sposterà in basso.

Riso. 3.47. Valori delle proprietà a destra e in basso per il posizionamento relativo

Il posizionamento relativo ha le seguenti caratteristiche.

• Questo tipo di posizionamento non è applicabile agli elementi della tabella come celle, righe, colonne, ecc.
• Quando un elemento viene spostato rispetto alla sua posizione originale, lo spazio occupato dall'elemento rimane vuoto e non viene riempito da elementi sotto o sopra.

L'Esempio 3-36 mostra il testo dell'intestazione spostato verso il basso per dargli uno stile di scrittura speciale.

Esempio 3.36. Titolo del testo

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Scienza dei caratteri Az e buki

Il font è un mezzo per esprimere il design, non una lettura banale.

Il risultato di questo esempio è mostrato in Fig. 3.48.

Riso. 3.48. Sposta il testo rispetto alla posizione originale

Livelli nidificati

Di solito, il posizionamento relativo di per sé non viene spesso utilizzato, poiché esistono numerose proprietà che svolgono effettivamente lo stesso ruolo, ad esempio lo stesso margine . Ma la combinazione di diversi tipi di posizionamento per i livelli nidificati è una delle tecniche di layout convenienti e pratiche. Se relativo è impostato per l'elemento genitore e assoluto per il figlio, il sistema di coordinate cambierà e la posizione dell'elemento figlio sarà indicata rispetto al suo genitore (Fig. 3.49).

Riso. 3.49. Valori delle proprietà sinistro, destro, superiore e inferiore nei livelli nidificati

Le coordinate vengono contate dal bordo interno del bordo, i valori del campo non vengono presi in considerazione. L'esempio seguente inserisce il testo nell'angolo inferiore destro del livello vicino al bordo, ignorando la proprietà di riempimento.

Testo

Utilizzando le quattro proprietà left , right , top , bottom per controllare la posizione del livello interno, non è necessario conoscere la dimensione del livello padre. Ciò amplia l'ambito del posizionamento, quindi la posizione viene utilizzata abbastanza attivamente durante la disposizione di vari elementi. Ad esempio, prendiamo l'imposizione di varie informazioni su una foto: il numero di commenti su di essa, i link "Aggiungi un commento", "Informazioni sull'autore" e "Aggiungi ai preferiti". In generale, il risultato dovrebbe essere approssimativamente lo stesso di Fig. 3.50.

Riso. 3.50. Foto con elementi sovrapposti

Il codice stesso è mostrato nell'esempio 3.37. Il livello foto è posizionato in modo relativo e i livelli interni img (output foto), commento (numero di commenti) e strumento (collegamenti nella parte inferiore della foto) sono impostati in posizione assoluta.

Esempio 3.37. Posizionamento degli strati

XHTML 1.0 CSS 2.1 CSS 3 IE 7+ IE 9+ Cr Op Sa Fx

134