Share
Este foarte posibil să utilizați poziționarea CSS pe elementele rețelei, la fel cum ați face cu cele mai multe alte elemente. Există totuși una sau două ciudățenii, așa că haideți să aruncăm o privire rapidă pentru a vă asigura că evitați capcanele.
Să începem cu o rețea simplă, cu nouă elemente, așezate în trei coloane. Fiecare coloană este lărgită, cu excepția celei de a treia coloane care (datorită minim maxim()) se va micșora nu mai puțin de 160 px:
grilă-șablon-coloane: 1fr 1fr minmax (160px, 1fr);
Adăugând câteva reguli la unul dintre ele, putem să o poziționăm relativ:
.element-2 poziție: relativă; dreapta: 100px; top: 30px;
Deci, așa cum ne-am putea aștepta, noi declarăm asta -Item 2 trebuie să fie poziționată relativ, apoi să definească unele proprietăți de offset (deși nu încercați să utilizați unitatea fr pe acestea, nu va funcționa).
Veți observa, dacă redimensionați fereastra, că elementul de grilă continuă să se comporte (redimensionați) exact așa cum a fost înainte de al repoziționa și încă egoist își rezervă locul în rețea în cazul în care simte că se întoarce.
Deci, ce se întâmplă când noi absolut poziția acelui element? În primul rând, se va poziționa împotriva celui mai apropiat strămoș care are o valoare de poziție declarată. Dacă nu setați poziție: relativă; (de exemplu) pe containerul grilei, elementul grilei va zbura din granițele rețelei în căutarea unui alt lucru pe care să-l păstrați, cum ar fi elementul html.
Veți vedea în demonstrația de mai sus că elementul este acum poziționat absolut 100px din stânga și 30px din partea de sus a containerului grilă. Ea a fost efectiv scos din fluxul documentelor, așa cum este normal cu elementele absolut poziționate. Slotul său în rețea a fost completat de item-3 iar celelalte elemente s-au plasat pentru a umple golurile rămase.
Notă: în cazul în care containerul nostru de rețea ar fi avut padding, poziționarea ar fi în raport cu acele limite exterioare de umplutură.
De asemenea, veți vedea că nu mai are dimensiunile pe care le folosea când făcea parte din rețea. A scăzut la dimensiunea conținutului. Grila nu influențează dimensionarea elementului, iar elementul nu influențează în nici un fel dimensiunea grilei.
S-ar putea să fie nevoie să vă obișnuiți, dar în plus față de compensările obișnuite puteți poziționa și un element de rețea folosind proprietățile de plasare a rețelei. De exemplu, hai să ne plasăm -Item 2 absolut pe grilă: 3/2; (cu alte cuvinte, începând cu linia a treia în jos și cu a doua linie de coloană).
Se pare ciudat, dar puteți vedea că elementul, încă neafectat de dimensiunea grilei și încă în afara fluxului, sa poziționat în mod rudimentar deasupra item-9. Este ca și cum ar avea o rețea propriu-zisă, pe deasupra originalului.
Notă: z-index vă va permite să modificați ordinea de stivuire a articolelor, dacă doriți.
Mergând mai departe, dacă adăugăm apoi o compensare în amestec (top: 50px; de exemplu), elementul nostru va aplica acea compensare, rămânând în același timp în favoarea propriului plasament imaginar al grilei:
În tutorialul nostru anterior am vorbit despre modul în care Grid va crea implicit piese dacă acestea sunt necesare; piese dincolo de cele pe care le definim în mod explicit. Putem poziționa elemente pe acele piste implicite ale rețelei, dacă există, dar Grid nu va crea acele piste pentru elemente în afara fluxului.
În demo-ul de mai jos, ne-am poziționat -Item 2 pe grilă: 2/4; dar acest lucru este posibil numai pentru că elementul-6, care este încă în flux, a determinat deja Grid să creeze acele piese suplimentare pentru noi.
De ce ai nevoie de poziționare cu Grid? Inițial s-ar putea să pară că este prea mult. Dar, atunci când vă gândiți la machetele rupte și vă deplasați dincolo de paginile direct "de pe și de jos" pe care le-am obișnuit, cred că veți găsi o poziționare destul de utilă.
Accentsconagua