Hvordan Float et Div over en annen til å maskere Bottom Div

Den absolutte Cascading Style Sheets eiendom kan du manuelt sette opp plasseringen av en div tag i stedet for å stole på standard nettleser plassering. Du kan bruke en div til å overlappe hverandre, som skjuler div nederst i bunken. Når du setter opp en solid bakgrunn for den øverste div, den øverste div skjuler helt div ligger på bunnen. Du kan sette opp dette oppsettet ved hjelp av CSS-stiler.

Bruksanvisning

1 Høyreklikk på HTML-filen du vil redigere, og klikk deretter på "Åpne med." Klikk på HTML editor i programmenyen.

2 Sett opp CSS-klasser for begge div koder. Følgende kode plasserer to div koder i øvre venstre hjørne, og den andre klassen setter opp den øverste div med en solid, svart bakgrunnsfarge:

div.bottom {

position: absolute;

topp 10;

venstre: 10;

width: 100px;

height: 100px;

background-color: #FFFFFF;

}

div.top {

position: absolute;

topp 10;

venstre: 10;

width: 100px;

height: 100px;

background-color: # 000000;

}

Legg merke til hver av div klasser er den samme, bortsett fra bakgrunnsfarge, så den øverste div skjuler alt innhold i bunnen div.

3 Lag divs i HTML-koden. Du definerer bunnen div tag først, deretter definere den øverste div. Følgende kode viser deg hvordan du setter opp de to divs:

<Div class = "bottom"> Skjult innhold </ div>

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