La proprietà assoluta di fogli di stile CSS consente di impostare manualmente la posizione di un tag div anziché affidarsi la posizione del browser Web predefinito. È possibile utilizzare un div per sovrapporre un altro, che nasconde il div nella parte inferiore dello stack. Quando si imposta un solido background per il div top, il div superiore nasconde completamente il div che si trova nella parte inferiore. È possibile impostare questo layout utilizzando gli stili CSS.

Istruzioni

1

Fare clic destro il file HTML che si desidera modificare, quindi fare clic su "Apri con". Fare clic su editor HTML nel menu del programma.

2

Impostare le classi CSS per entrambi i tag div. Il codice seguente inserisce due tag div in alto a sinistra, e la seconda classe imposta il div top con un colore solido, sfondo nero:

div.Bottom () {

Posizione: assoluta;

Top: 10;

sinistra: 10;

Larghezza: 100px;

Altezza: 100px;

colore di sfondo: #FFFFFF;

}

div.Top () {

Posizione: assoluta;

Top: 10;

sinistra: 10;

Larghezza: 100px;

Altezza: 100px;

background-color: #000000;

}

Avviso ogni delle classi div sono uguali tranne per il colore di sfondo, così il div superiore nasconde tutto il contenuto del div di fondo.

3

Creare il div nel codice HTML. È definire il tag div inferiore prima, quindi definire il DIV superiore. Il codice riportato di seguito viene illustrato come impostare i due div:

< div class = "in basso" > nascosto contenuto < / div >

< div class = "top" > Overlay div < / div >