Hvordan lage Float elementer med Z-lag
Du kan flyte og laget elementer på websidene ved hjelp av CSS, eller Cascading Style Sheets. Den "flyte" eiendom komplekser noe element å flyte til høyre eller venstre, og fører til andre elementer for å vikle rundt det, mens "z-index" skaper stabling lag. Du flyte sideelementer og stable så mange av dem på toppen eller under hverandre. Hvert lag krever også den "posisjon" egenskap, men å sette den til "relative" påvirker ikke posisjonen av elementet. Setting "top" og "venstre" lar deg endre posisjonen så mye eller så lite som du trenger.
Bruksanvisning
1 Åpne websiden i Notepad eller en kode editor og finne elementene du ønsker å flyte og lag. Opprett nye elementer eller gruppe elementene sammen med "<div>" tags:
<Div id = "layer1">
Enhver form for innhold her ...
</ Div>
<Div id = "lag2">
Enhver form for innhold her ...
</ Div>
Få ID navnene på disse elementene.
2 Gå til "<head>" koder øverst på websiden koden og søke etter "<style>" tags. Dine stil regler må gå mellom disse kodene; legge dem hvis du ikke ser noen:
<Style type = "text / css">
</ Style>
3 Skriv en stil regel for hvert element du ønsker å flyte og lag, velge de elementer av deres ID:
layer1 {
}
lag2 {
}
Når du skriver ID-velgere, prefiks ID-navn med hash symboler.
4 Gi hvert element en "flyte" eiendom med en verdi på "venstre" eller "høyre":
layer1 {
float: left;
}
lag2 {
float: left;
}
Når du flyter to elementer i samme retning, de stille opp mot hverandre, starter på "riktig" side for en "riktig" flyte og starter på "venstre" for en "venstre" flyte. Å overlappe elementene, sette både til "venstre" er best i de fleste situasjoner.
5 Gi hvert element både en "z-index" eiendom og en "position: relative" eiendom. Du kan ikke bruke "z-index" uten å gi elementet stilling:
layer1 {
float: left;
position: relative;
z-index: 1;
}
lag2 {
float: left;
position: relative;
z-index: 2;
}
Bruk hvilken som helst verdi mellom -999 og 999 for "z-index" eiendom. Jo høyere verdi, jo høyere prioritet elementet blir. I koden ovenfor eksempel det andre laget vises på toppen av den første fordi den har en høyere "z-index" verdi.
6 Manipulere plassering av lag ved hjelp av "topp" og "venstre" egenskaper. Du kan bruke negative eller positive verdier; innstillingen "venstre" til "-100px" plasserer et lag 100 piksler til høyre for sin opprinnelige posisjon. For eksempel:
layer1 {
float: left;
posisjoner: venstre;
z-index: 1;
}
lag2 {
float: left;
position: relative;
z-index: 2;
venstre: -100px;
}
I dette eksempelet, overlapper det første ved 100 piksler det andre lag.