Pozicionimi i CSS është më shumë se vetëm X, Y Koordinatat
Pozicionimi i CSS ka qenë prej kohësh një pjesë e rëndësishme e krijimit të faqeve të internetit. Edhe me ngritjen e teknikave më të reja të paraqitjes së CSS si Flexbox dhe CSS Grid, pozicionimi ende ka një vend të rëndësishëm në çantën e mashtrimeve të një projektuesi të internetit.
Kur përdorni CSS pozicionimin, gjëja e parë që do t'ju duhet të bëni është të krijoni pronën CSS për pozicionin për të treguar shfletuesin nëse do të përdorni pozicionimin absolute ose relative për një element të dhënë. Duhet gjithashtu të kuptoni qartë dallimin ndërmjet këtyre dy pronave të pozicionimit.
Ndërsa absolute dhe relative janë dy pronat e pozicionit CSS më shpesh të përdorura në web design, në të vërtetë ka katër shtete në pronën e pozicionit:
- i pandryshueshëm
- absolut
- i afërm
- fiks
Statik është pozicioni i parazgjedhur për çdo element në një faqe interneti. Nëse nuk përcaktoni pozicionin e një elementi, do të jetë statike. Kjo do të thotë se do të shfaqet në ekran në bazë të vendit ku ndodhet në dokumentin HTML dhe se si do të shfaqet brenda rrjedhës normale të atij dokumenti.
Nëse aplikoni rregullat e pozicionimit si lart ose majtas tek një element që ka një pozitë statike, ato rregulla do të injorohen dhe elementi do të mbetet aty ku shfaqet në rrjedhën normale të dokumentit. Në të vërtetë, rrallë, nëse ndonjëherë, do të duhet të vendosni një element në një pozicion statik në CSS pasi që është vlera e paracaktuar.
Pozicionimi Absolute CSS
Pozicionimi absolut është ndoshta pozicioni më i lehtë CSS për të kuptuar. Ju filloni me këtë pronë CSS pozicioni:
pozita: absolute;Kjo vlerë tregon shfletuesit se gjithçka që do të pozicionohet duhet të hiqet nga rrjedha normale e dokumentit dhe në vend të kësaj të vendoset në një vendndodhje të saktë në faqe. Kjo llogaritet bazuar në paraardhësin më të afërt të atij elementi jo statik.
Për shkak se një element absolutisht i pozicionuar është marrë nga rrjedha normale e dokumentit, ajo nuk do të ndikojë në mënyrën se si elementët para ose pas saj në HTML janë të pozicionuar në faqen e internetit.
Si shembull - nëse do të kishit një ndarje që u pozicionua duke përdorur një vlerë relative (do ta shikojmë këtë vlerë pak kohë) dhe brenda asaj divizioni keni një paragraf që dëshironi të poziciononi 50 piksela nga maja e ndarjes, ju do të shtonte një vlerë pozicioni të "absolute" ndaj atij paragrafi së bashku me një vlerë të kompensuar prej 50 pikësh në pronën "e lartë", si kjo.
pozita: absolute; lartë: 50px;Ky element absolutisht i pozicionuar do të shfaqte gjithmonë 50 piksele nga maja e asaj ndarje relativisht të pozicionuar - pa marrë parasysh se çfarë tjetër tregon aty në rrjedhën normale. Elementi juaj "absolutisht i pozicionuar" përdori një pozicion relativisht të pozicionuar si kontekstin e tij dhe vlera pozitive e përdorur është relative se ajo.
Katër pronat e pozicionimit që ju keni në dispozicion për të përdorur janë:
- më i lartë
- e drejtë
- fund
- majtas
Ju mund të përdorni ose lart ose poshtë (pasi që një element nuk mund të pozicionohet sipas të dyja këtyre vlerave) dhe djathtas ose majtas.
Nëse një element vendoset në një pozicion absolut, por aty nuk ka paraardhës të vendosur jo-statik, atëherë do të pozicionohet në lidhje me elementin e trupit, i cili është elementi më i lartë i faqes.
Pozicionimi relativ
Ne përmendëm tashmë pozicionimin relativ, prandaj le të shohim atë pronë tani.
Pozicionimi relativ përdor të njëjtat katër pozicione pozicionimi si pozicionimi absolut, por në vend që të bazohet pozicioni i elementit mbi paraardhësin më të afërt të tij jo-statik, fillon nga ku do të ishte elementi nëse do të ishte ende në rrjedhën normale.
Për shembull, nëse keni tre paragrafë në faqen tuaj të internetit dhe e treta ka një stil "pozitë: relative" të vendosur mbi të, pozicioni i tij do të kompensohet bazuar në vendndodhjen aktuale të tij.
Paragrafi 1.
Paragrafi 2.
Paragrafi 3.
Në shembullin e mësipërm, paragrafi i tretë do të vendoset 2em nga ana e majtë e elementit të enës, por do të jetë ende nën dy paragrafët e parë. Ajo do të mbetet në rrjedhën normale të dokumentit, dhe vetëm të kompensohet pak. Nëse e ndryshuat në pozitë: absolute; çdo gjë që pasoi do të shfaqet në krye të saj, sepse nuk do të ishte më në rrjedhën normale të dokumentit.
Elementet në një faqe ueb shpesh përdoren për të vendosur një vlerë pozicioni: relative pa përcaktuar vlerën e kompensuar, që do të thotë se elementi mbetet pikërisht aty ku do të shfaqet në rrjedhën normale. Kjo bëhet vetëm për të vendosur atë element si një kontekst kundër të cilit elementët e tjerë mund të pozicionohen absolutisht. Për shembull, nëse keni një ndarje që rrethon tërë faqen tuaj të internetit me një vlerë të klasës së "kontejnerit" (që është një skenar shumë i zakonshëm në dizajnimin e web), kjo ndarje mund të caktohet në një pozitë relative, në mënyrë që çdo gjë brenda saj të mund të përdorë ajo si një kontekst pozicionimi.
Çka rreth pozicionimit fiks?
Pozicionimi i fiksuar është shumë si pozicionimi absolut. Pozicioni i elementit llogaritet në të njëjtën mënyrë si modeli absolut, por elementët fiksë janë fiksuar në atë vend - pothuajse si një ujëra . Çdo gjë tjetër në faqe do të rrotullojë atë element.
Për të përdorur këtë vlerë të pronës, do të vendosni:
pozita: fikse;Mbani në mend, kur të ndreqni një element në vendndodhjen tuaj, ajo do të shtypet në atë vend kur faqja juaj në internet të printohet. Për shembull, nëse elementi yt është i fiksuar në krye të faqes tënde, do të shfaqet në krye të çdo faqe të shtypur - sepse është fikse në krye të faqes. Ju mund të përdorni llojet e mediave për të ndryshuar se si faqet e printuara shfaqin elemente fikse:
Ekrani @media {h1 # parë {pozitë: fikse; }} @media print {h1 # parë {pozicioni: statik; }}Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 1/7/16.