Pozisyon CSS se Plis pase Jis X, Y Kowòdone
Pozisyon CSS ki depi lontan te yon pati enpòtan nan kreye kouman sit entènèt. Menm ak ogmantasyon nan plus CSS Layout teknik tankou Flexbox ak CSS gri, pwezante toujou gen yon plas enpòtan nan sak nenpòt designer entènèt la nan ke trik nouvèl.
Lè w ap itilize CSS pwezante, premye bagay ou pral bezwen fè se etabli pwopriyete a CSS pou pozisyon yo di navigatè a si w ap ale nan sèvi ak absoli oswa relatif pwezante pou yon eleman yo bay yo. Ou bezwen byen konprann diferans ki genyen ant de pwopriyete pwezante sa yo.
Pandan ke absoli ak relatif yo se pwopriyete yo de pozisyon CSS pi souvan itilize nan konsepsyon sit entènèt, gen aktyèlman kat eta nan pwopriyete a pozisyon:
- estatik
- absoli
- relatif
- fiks
Estatik se pozisyon nan default pou nenpòt eleman sou yon paj entènèt. Si ou pa defini pozisyon nan yon eleman, li pral estatik. Sa vle di ke li pral montre sou ekran an ki baze sou kote li nan dokiman an HTML ak ki jan li ta montre andedan koule nan nòmal nan dokiman sa a.
Si ou aplike règleman pwezante tankou tèt oswa bò gòch nan yon eleman ki gen yon pozisyon estatik, règleman sa yo pral inyore ak eleman an ap rete kote li parèt nan koule dokiman nòmal. An verite, ou ta raman, si tout tan, bezwen mete yon eleman nan yon pozisyon estatik nan CSS depi sa se valè a default.
Absoli CSS Pozisyon
Absoli pwezante se pwobableman pozisyon ki pi fasil CSS pou konprann. Ou kòmanse ak pwopriyete pozisyon CSS sa a:
pozisyon: absoli;Valè sa a di ke navigatè a kèlkeswa sa ki pral pozisyone yo ta dwe retire nan koule nòmal dokiman an epi olye yo mete l nan yon kote egzak sou paj la. Sa a se kalkile ki baze sou ki eleman pi pre eleman ki pa estatikman pozisyone.
Paske se yon eleman absoliman pozisyone pran soti nan koule nan nòmal nan dokiman an, li pa pral afekte ki jan eleman yo anvan li oswa apre li nan HTML a yo pozisyone sou paj wèb la.
Kòm yon egzanp - si ou te gen yon divizyon ki te pozisyone lè l sèvi avèk yon valè nan relatif (nou pral gade nan valè sa a yon ti tan), ak andedan ki divizyon ou te gen yon paragraf ke ou te vle pozisyon 50 piksèl soti nan tèt la nan divizyon an, ou ta ajoute yon valè pozisyon nan "absoli" nan ki paragraf ansanm ak yon valè konpanse nan 50px sou pwopriyete a "tèt", tankou sa a.
pozisyon: absoli; tèt: 50px;Sa a eleman absoliman pozisyone ta Lè sa a, toujou montre 50 piksèl nan tèt la nan ki divizyon relativman pozisyone - pa gen pwoblèm sa lòt bagay montre gen nan koule nòmal. Ou "absoliman" pozisyone eleman itilize youn nan relativman pozisyone kòm kontèks li yo ak valè a positing ou itilize se relatif ke sa.
Kat pozisyon pwezante ke ou gen disponib pou yo itilize:
- tèt
- dwa
- anba
- kite
Ou ka itilize swa tèt ou anba (depi yon eleman pa ka pozisyone selon toude nan valè sa yo) ak swa dwa oswa kite.
Si se yon eleman mete nan yon pozisyon nan absoli, men gen li pa gen okenn zansèt non-staticly positionné, Lè sa a, li pral pozisyone relatif nan eleman nan kò, ki se eleman ki pi wo nivo nan paj la.
Relatif Pozisyon
Nou deja mansyone relatif pwezante, se konsa kite a gade nan ki pwopriyete kounye a.
Relatif pwezante itilize menm kat pozisyon pwezante kòm absoli pwezante, men olye de baz pozisyon nan eleman an sou li pi pre zansèt ki pa estatikman pozisyone, li kòmanse soti nan kote eleman an ta dwe si li te toujou nan koule a nòmal.
Pou egzanp, si ou gen twa paragraf nan paj entènèt ou an, ak twazyèm lan gen yon "pozisyon: relatif" style mete sou li, li nan pozisyon yo pral konpanse ki baze sou kote li ye kounye a.
Paragraf 3.
Nan egzanp ki anwo a, twazyèm paragraf la pral pozisyone 2em nan bò gòch eleman veso a, men li pral toujou anba de premye paragraf yo. Li ta rete nan koule nan nòmal nan dokiman an, ak jis pou konpanse yon ti kras. Si ou chanje li nan pozisyon: absoli; anyen apre sa li ta montre sou tèt li, paske li ta pa dwe nan koule nan nòmal nan dokiman an.
Eleman sou yon paj entènèt yo souvan itilize yo mete yon valè de pozisyon: relatif ki pa gen okenn valè konpanse etabli, ki vle di ke eleman rete egzakteman ki kote li ta parèt nan koule nòmal. Sa a se fè sèlman etabli ke eleman kòm yon kontèks kont ki lòt eleman ka pozisyone absoliman. Pou egzanp, si ou gen yon divizyon ki antoure tout sit entènèt ou a ak yon valè klas nan "veso" (ki se yon senaryo trè komen nan konsepsyon sit entènèt), ki divizyon ka mete nan yon pozisyon nan relatif pou ke anyen andedan nan li ka itilize li kòm yon kontèks pwezante.
Ki sa ki sou Fiks Pozisyon?
Fiks pwezante se yon anpil tankou absoli pwezante. Se pozisyon nan eleman an kalkile nan menm fason an kòm modèl la absoli, men eleman fiks yo Lè sa a, fiks nan ki kote - prèske tankou yon filigran . Tout lòt bagay sou paj la pral Lè sa a, woulo liv sot pase yo ki eleman.
Pou itilize valè pwopriyete sa a, ou ta mete:
pozisyon: fiks;Kenbe nan tèt ou, lè ou ranje yon eleman nan plas sou sit ou, li pral enprime nan kote sa a lè se paj entènèt ou an enprime soti. Pou egzanp, si eleman ou an fiks nan tèt paj ou a, li pral parèt nan tèt la nan chak paj enprime - paske li nan fiks nan tèt la nan paj la. Ou ka itilize kalite medya yo chanje ki jan paj enprime yo montre eleman fiks yo:
@media ekran {h1 # premye {pozisyon: fiks; }} @media enprime {h1 # premye {pozisyon: estatik; }}Original atik pa Jennifer Krynin. Edited by Jeremy Girard sou 1/7/16.