Capitolul 7: PoziționarePoziționare
Am învățat în lecțiile trecute despre Flex și Grid, care ne permit să aranjăm elementele dintr-un părinte. Acestea sunt sisteme relativ noi (dacă vrei să consideri „noi” chestii suportate de toate browserele începând din 2015, respectiv 2017).
Cu mulți ani înainte de acestea, puteam să aranjăm elemente în mare parte independent de părinte, folosind proprietatea position. Aceasta de fapt ascunde mai multe sisteme, activate în de diferitele valori pe care le putem da:
position: fixed Face un element să apară fix pe ecran, și să rămână acolo chiar dacă se face scroll.
position: absolute Face un element să apară la o poziție fixă pe pagină (sau în interiorul unui element). Spre deosebire de poziționarea fixă, poziționarea absolută permite elementului să se deplaseze cu scroll-ul.
position: relative Face ca un element să se deplaseze față de poziția la care ar apărea în mod normal.
position: static este modul în care sunt poziționate elementele în mod normal
position: sticky este o combinație între fixed și static: Când scroll-ul este deasupra poziției normale, se comportă ca static, dar când elementul ar ieși din ecran, se transformă în fixed.
Proprietăți de poziționare
Deși înseamnă ceva puțin diferit în funcție de poziționare, și vom intra în detalii în lecțiile viitoare, avem 4 proprietăți tradiționale pentru a seta poziția elementului:
toprightbottomleft
În ultima vreme, se recomandă, însă, să nu mai folosim aceste proprietăți pentru că nu țin cont de direcția textului. În schimb, se recomandă folosirea familiei de proprietăți inset
| inset | Tradițional (Stânga-Dreapta) |
|---|---|
| inset-block | top + bottom |
| inset-block-start | top |
| inset-block-end | bottom |
| inset-inline | left + right |
| inset-inline-start | left |
| inset-inline-end | right |
Dacă folosim însăși proprietatea inset, aceasta funcționează asemănător proprietăților margin și padding: O singură valoare va fi setată pentru toate direcțiile, iar dacă dăm mai multe valori se vor seta astfel:
inset: «sus» «dreapta» «jos» «stânga»;
inset: «sus» «dreapta+stânga» «jos»;
inset: «sus+jos» «dreapta+stânga»;
Proprietatea z-index
Atunci când poziționăm sau transformăm elemente, sunt mari șanse ca unele să ajungă peste altele.
Cele care apar mai târziu în cod vor fi puse peste, dar putem controla asta folosind z-index.