Hvordan plassere en boks under en DIV i CSS

Ved søknad Cascading Style Sheet koden til en webside, blir HTML-elementer som gjengis synlig ansett som opptar en "boks" med plass på siden. Før CSS, elementer på siden ikke generelt overlappe hverandre, men "fløt" sammen etter formatering brukes av HTML. Med CSS imidlertid elementer kan plasseres vilkårlig på siden og kan overlappe hverandre. Bruk "z-index" eiendom i CSS-koden for å finne ut hvilken boks elementer vil dukke under eller over andre når overlapp oppstår.

Bruksanvisning

1 Legg til følgende CSS-kode mellom "hodet" kodene i HTML-dokumentet:

<Style type = "text / css">

div {

border: 1px svart solid;

position: relative;

background-color: white;

}

.shadowbox {

position: absolute;

z-index: 1;

venstre: 5px;

top: 5px;

width: 100%;

height: 100%;

background-color: grå;

}

</ Style>

Den "shadowbox" blir brukt på en span element nestet inni en div. Legg merke til dens negative "z-index" eiendom, noe som vil føre til at det å sitte under andre elementer (standardverdien er 0), og "position: absolute" linje, som fjerner den fra vanlig sidestrøm og posisjonerer det i forhold til sin ordnede element, som er det div vil du hekker den i. bredden og høyden er satt slik at det er samme størrelse som den overordnede div. "Stilling: relative" er nødvendig for den overordnede elementet, fordi ellers den nestede spenn vil posisjonere og størrelse seg i forhold til hele siden.

2 Legg til følgende kode i kroppen av HTML-dokumentet:

<Div> Dette er et div-element. En span element er nestet inni den, men virker plassert under den. <Span class = "shadowbox"> </ span> </ div>

3 Lagre siden og legg den i en nettleser. Spennet element, nestet inne i div, blir dyttet ned og rett ved "venstre" og "topp" egenskaper. Dette skaper en skyggeeffekt på div. Eksperimenter med egenskaper deklarert i CSS-koden for å se hvordan siden endringene.

Hint

  • Legg til følgende linje til toppen av HTML-dokumentet for å forsikre leseren tolker CSS riktig. Dette løser kompatibilitetsproblemer med Internet Explorer:
  • <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">