HTML elementų padėtis vaidina labai svarbų vaidmenį organizuojant tinklalapio komponentus. Tiksliau, elementų padėtis gali būti koreguojama naudojant CSS. padėtis ' nuosavybė. Ši ypatybė gali būti susieta su poslinkio ypatybėmis, pvz., viršuje, kairėje, dešinėje ir apačioje, suteikiant konkrečias reikšmes elementui koreguoti puslapyje. Tačiau „ absoliutus ” išdėstytus elementus galima reguliuoti artimiausio išdėstyto elemento atžvilgiu.
Šis įrašas paaiškins absoliučią CSS padėties nustatymą.
CSS „pozicijos“ ypatybė
„ padėtis “ ypatybę CSS galima naudoti norint pakoreguoti elemento padėtį. Skirtingos padėties savybės reikšmės yra fiksuotos, absoliučios, santykinės, statinės ir pastovios. Šios vertės nustatomos su poslinkio savybėmis, pvz., viršuje, dešinėje, kairėje ir apačioje, kad būtų galima reguliuoti elemento padėtį.
Kaip taikyti CSS absoliutų padėties nustatymą?
Elemento absoliuti padėties nustatymas gali būti taikomas naudojant CSS ' padėtis „turtas, kurio vertė“ absoliutus “. Elementas su absoliučia padėtimi sureguliuojamas pagal artimiausią pagrindinį elementą. Bet jei protėvis nėra išdėstytas, jis prisitaikys prie dokumento kūno dalies.
Pavyzdys
Supraskime koncepciją praktiniu pavyzdžiu.
1 veiksmas: sukurkite HTML failą
HTML faile, kūno elemente, pridėkite div su klasės pavadinimu ' pagrindinis “. Tada sukurto div viduje pridėkite HTML žymą, susietą su šiais atributais:
-
- “ src “ pateikia nuorodą į vaizdą.
- “ klasė “ naudojamas CSS elementams stiliuoti.
- “ viskas “ atributas nurodo tekstą, kuris rodomas vietoje vaizdo, jei vaizdo nepavyksta įkelti puslapyje.
- “ viskas “ atributas nurodo tekstą, kuris rodomas puslapyje vietoje vaizdo, jei vaizdo nepavyksta įkelti į puslapį.
Tada pridėkite kitą div su antrašte ir pastraipos elementais h1 ir p:
< div klasė = 'pagrindinis' >< div klasė = 'turinys' >
< img src = 'images/linuxlogo.png' klasė = 'namai' viskas = 'Linux logotipas' plotis = '80 piks.' >
< h1 > CSS absoliutus padėties nustatymas h1 >
< p > Sveiki Linuxhint komanda ! p >
div >
div >
CSS HTML elementams papuošti naudojamos kelios stiliaus savybės.
2 veiksmas: sukurkite „visų“ elementų stilių
* {šriftų šeima: Verdana, Geneva, Tahoma, sans-serif;
}
HTML elementai kuriami naudojant „ šrifto šeima „turtas, kurio vertė“ Verdana, Ženeva, Tahoma, sans-serif “. Šis reikšmių sąrašas užtikrina, kad jei naršyklė nepalaiko pirmojo stiliaus, bus pritaikytas kitas.
3 veiksmas: stiliaus „namai“ skyr
.namai {padėtis: absoliuti;
viršuje: 50 pikselių;
kairėje: 45px;
}
Žemiau pateikiamos savybės, taikomos „ namai “ div:
-
- “ padėtis “ ypatybė nustato elemento padėtį. Čia pridėta „ absoliutus “ įdės elementą, palyginti su HTML pagrindine dalimi.
- “ viršuje “ savybė naudojama vertikaliam elemento reguliavimui.
- “ paliko ” savybė naudojama elemento horizontaliam reguliavimui.
4 veiksmas: stiliaus „turinys“ skirsnis
.turinys {fono spalva: kadeto mėlyna;
plotis: 300 pikselių;
aukštis: 250 pikselių;
užpildymas kairėje: 40 pikselių;
paraštė kairėje: 80 pikselių;
}
Toliau pateikiamos CSS ypatybės, taikomos „ turinys “ div:
-
- “ fono spalva “ ypatybė nustato elemento fono spalvą.
- “ plotis “ ypatybė nustato elemento plotį.
- “ aukščio “ ypatybė nustato elemento aukštį.
- “ kamšalas-kairėje “ ypatybė nustatyta, kad kairėje elemento turinio pusėje būtų pridėta vietos.
- “ paraštė-kairė ypatybė nurodo erdvę kairėje elemento pusėje.
Šiuo metu mūsų tinklalapis atrodys taip:
Iš aukščiau pateikto rezultato matyti, kad „div home“ vaizdas yra 50 pikselių atstumu nuo dokumento korpuso viršaus ir 45 pikselių kairėje. Be to, namų div padėtis nustatoma atsižvelgiant į HTML pagrindinę dalį.
Kaip pakoreguoti elemento padėtį „santykiškai“ su pagrindiniu elementu?
Šiame skyriuje sužinosite, kaip pakoreguoti elemento padėtį, palyginti su artimiausios padėties pirminiu elementu.
Nustatyti „poziciją“ „Turinio“ savybė
padėtis: santykinė;
Norėdami pakoreguoti elemento padėtį pirminio elemento atžvilgiu, nustatykite „ padėtis ' pirminio elemento ypatybė į ' giminaitis “ vertė.
Nustatyti „poziciją“ Elemento „img“ ypatybė
.namai {padėtis: absoliuti;
viršuje: 100 taškų;
kairėje: 220 pikselių;
}
Čia:
-
- “ padėtis “ nuosavybė, kurios vertė nustatyta kaip „ absoliutus “ bus išdėstyta pirminio elemento atžvilgiu (ty turinio div pozicija nustatoma su reikšme santykinis).
- “ viršuje ypatybė naudojama elemento padėties nustatymui iš viršaus.
- “ paliko ypatybė naudojama elemento padėties nustatymui iš kairės.
Išvestis
Iš rezultato matyti, kad vaizdas buvo išdėstytas pirminio div atžvilgiu ir atrodo tinkamas.
Išvada
CSS“ padėtis “ ypatybė naudojama HTML elementų vietai nustatyti. Ši savybė gali būti vertinama kaip fiksuota, santykinė, absoliuti, lipni ir statinė. „ absoliutus “ reikšmė nustatys elemento padėtį, atitinkantį šalia esantį pagrindinį elementą. Šis įrašas paaiškino CSS absoliučią padėties nustatymą praktiniu pavyzdžiu.