Poziționarea CSS este mai mult decât X, Y Coordonate
Poziționarea CSS a fost mult timp o parte importantă în crearea layout-urilor site-ului. Chiar și odată cu apariția unor noi tehnici de layout CSS, cum ar fi Flexbox și CSS Grid, poziționarea are încă un loc important în orice geantă de trucuri a designerului web.
Atunci când utilizați poziționarea CSS, primul lucru pe care trebuie să-l faceți este să stabiliți proprietatea CSS pentru a afla poziția în browser dacă doriți să utilizați poziționarea absolută sau relativă pentru un anumit element. De asemenea, trebuie să înțelegeți în mod clar diferența dintre aceste două proprietăți de poziționare.
Deși absolută și relativă sunt cele două proprietăți de poziționare CSS utilizate cel mai des în designul web, există patru state la proprietatea de poziție:
- static
- absolut
- relativ
- fix
Static este poziția prestabilită pentru orice element dintr-o pagină web. Dacă nu definiți poziția unui element, acesta va fi static. Aceasta înseamnă că acesta se va afișa pe ecran pe baza locului în care se află în documentul HTML și a modului în care va fi afișat în fluxul normal al documentului respectiv.
Dacă aplicați reguli de poziționare ca de sus sau de stânga la un element care are o poziție statică, acele reguli vor fi ignorate, iar elementul va rămâne acolo unde apare în fluxul normal al documentelor. Într-adevăr, rareori, dacă vreodată, trebuie să setați un element la o poziție statică în CSS, deoarece aceasta este valoarea implicită.
Poziționarea absolută a CSS
Poziția absolută este probabil cea mai ușoară poziție CSS de înțeles. Începeți cu această proprietate a poziției CSS:
poziția: absolută;Această valoare indică browserului că orice va fi poziționat trebuie să fie eliminat din fluxul normal al documentului și plasat într-o locație exactă a paginii. Aceasta se calculează pe baza celui mai apropiat strămoș care nu este static.
Deoarece un element absolut poziționat este scos din fluxul normal al documentului, acesta nu va afecta modul în care elementele din fața sau după ele în HTML sunt poziționate pe pagina web.
De exemplu, dacă ați avea o diviziune poziționată folosind o valoare relativă (vom examina această valoare în scurt timp) și în interiorul acelei diviziuni ați avut un paragraf pe care doriți să-l poziționați cu 50 de pixeli din partea de sus a diviziunii ar adăuga o valoare de poziție "absolută" acelui paragraf, împreună cu o valoare de offset de 50px pentru proprietatea "de sus", ca aceasta.
poziția: absolută; top: 50px;Acest element absolut poziționat ar afișa întotdeauna 50 de pixeli din partea superioară a acelei divizări relativ poziționate - indiferent ce altceva afișează acolo în flux normal. Elementul "absolut" poziționat a folosit poziția relativ poziționată ca context și valoarea de poziționare pe care o utilizați este relativă.
Cele patru proprietăți de poziționare pe care le aveți disponibile pentru utilizare sunt:
- top
- dreapta
- fund
- stânga
Puteți utiliza fie partea superioară, fie cea inferioară (deoarece un element nu poate fi poziționat în funcție de ambele valori) și fie în dreapta, fie în stânga.
Dacă un element este setat la o poziție absolută, dar acolo nu are strămoși nestatari, atunci acesta va fi poziționat în raport cu elementul corpului, elementul cel mai înalt al paginii.
Poziționarea relativă
Am menționat deja poziționarea relativă, așa că acum să vedem proprietatea.
Poziționarea relativă folosește aceleași patru proprietăți de poziționare ca poziționarea absolută, dar în loc să bazeze poziția elementului la cel mai apropiat strămoș poziționat nestatoric, acesta pornește de unde ar fi elementul dacă ar fi încă în fluxul normal.
De exemplu, dacă aveți trei paragrafe pe pagina dvs. web și al treilea are un stil "poziție: relativ" plasat pe acesta, poziția lui va fi compensată pe baza locației sale curente.
Paragraful 1.
Paragraful 2.
În exemplul de mai sus, al treilea paragraf va fi poziționat la 2 mm față de partea stângă a elementului container, dar va rămâne sub primele două paragrafe. Va rămâne în fluxul normal al documentului și va fi ușor decompensat. Dacă ați schimbat-o în poziție: absolută; orice urmați ar fi afișat în partea de sus a acesteia, pentru că nu va mai fi în fluxul normal al documentului.
Elementele de pe o pagină web sunt adesea folosite pentru a seta o valoare a poziției: relativă fără stabilirea valorii offset, ceea ce înseamnă că elementul rămâne exact unde ar apărea în flux normal. Acest lucru se face numai pentru a stabili acel element ca un context în care alte elemente pot fi poziționate absolut. De exemplu, dacă aveți o diviziune care înconjoară întregul dvs. site cu o valoare de clasă a "containerului" (care este un scenariu foarte frecvent în designul de web), diviziunea poate fi setată la o poziție relativă, astfel încât orice element din interiorul acesteia să poată fi utilizat ca un context de poziționare.
Ce este despre poziționarea fixă?
Poziționarea fixă este foarte asemănătoare cu poziționarea absolută. Poziția elementului este calculată în același mod ca și modelul absolut, însă elementele fixe sunt apoi fixate în acea locație - aproape ca un filigran . Orice altceva din pagină va parcurge apoi acel element.
Pentru a utiliza această valoare a proprietății, ați seta:
poziție: fixă;Rețineți că atunci când remediați un element pe site-ul dvs., acesta va fi imprimat în acea locație atunci când va fi tipărită pagina Web. De exemplu, dacă elementul dvs. este fixat în partea de sus a paginii, acesta va apărea în partea de sus a fiecărei pagini imprimate - deoarece este fixat în partea de sus a paginii. Puteți utiliza tipurile de suporturi media pentru a schimba modul în care paginile imprimate afișează elemente fixe:
Ecranul @media {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 1/7/16.