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>