Share
Det er ganske mulig å bruke CSS-posisjonering på gridelementer, akkurat som du ville med de fleste andre elementer. Det er en eller to quirks, men så la oss ta en rask titt for å sikre at du unngår fallgruvene.
La oss begynne med et enkelt nett, med ni elementer, lagt ut i tre kolonner. Hver kolonne er 1fr bred, unntatt den tredje kolonnen som (takket være MinMax ()) vil krympe ikke mindre enn 160px:
rutenett-mal-kolonner: 1fr 1fr minmax (160px, 1fr);
Ved å legge til et par regler til et av elementene, kan vi posisjonere det relativt:
.element-2 posisjon: relativ; høyre: 100px; topp: 30px;
Så som vi kanskje forventer, erklærer vi det punkt-2 skal plasseres relativt, og deretter definere noen kompensasjonsegenskaper (men ikke prøv å bruke fr-enheten på disse, det vil ikke fungere).
Du vil merke, hvis du endrer størrelsen på vinduet, at gridelementet fortsetter å oppføre seg (resize) akkurat som det var før vi reposisjonerte det, og det er fortsatt, egoistisk, å reservere sin plass i rutenettet i tilfelle det føles som å komme tilbake.
Så hva skjer når vi absolutt posisjon det elementet? For det første vil den posisjonere seg mot sin nærmeste forfader som har en erklært posisjonverdi. Hvis du ikke angir stilling: relativ; (for eksempel) på rutenettbeholderen, flytter rutenettet ut av rutenettets grenser på jakt etter noe annet å holde fast på, for eksempel HTML-elementet.
Du ser i demonstrasjonen ovenfor at varen nå er helt posisjonert 100 px fra venstre og 30 px fra toppen av rutenettet. Det har effektivt blitt fjernet fra dokumentflyten, som det er normalt med absolutt posisjonerte elementer. Sporet i nettet har blitt fylt av punkt-3 og de andre elementene har lagt seg til å fylle opp de gjenværende hullene.
Merk: Hvis vår nettbeholder skulle ha polstring, ville posisjoneringen være i forhold til de ytre polstringsgrensene.
Du vil også se at den ikke lenger har dimensjonene den brukte når den var en del av rutenettet. Den har krympet til størrelsen på innholdet. Gitteret påvirker ikke størrelsen på elementet, og elementet påvirker ikke størrelsen på rutenettet på noen måte.
Det kan ta litt vant til, men i tillegg til de normale forskyvningene kan du også plassere et rutenettobjekt ved hjelp av rutenettingsegenskapene. For eksempel, la oss plassere vår punkt-2 helt på rutenett: 3/2; (med andre ord, starter på tredje rad linje ned, og den andre kolonne linjen over).
Det ser merkelig ut, men du kan se at gjenstanden, som fortsatt er upåvirket av grensesnittets størrelse og fortsatt utenfor strømmen, har posisjonert seg frekt på toppen av element-9. Det er som om det har et rutenett av seg selv, på toppen av originalen.
Merk: z-indeksen lar deg endre stablerefølgen til elementene, hvis du vil.
Fortsett å fortsette, hvis vi da legger til en forskyvning i blandingen (topp: 50px; for eksempel) vårt element vil bruke den forskyvningen, mens den fortsatt er sant til sin egen imaginære rutenettplassering:
I vår tidligere opplæring snakket vi om hvordan Grid vil skape implisitt spor hvis de trengs; spor utover de vi definerer eksplisitt. Vi kan plassere elementer på de implisitte gridsporene hvis de eksisterer, men Grid vil ikke skape de sporer for elementer utenfor strømmen.
I demonstrasjonen nedenfor har vi plassert punkt-2 på grid-område: 2/4; men dette er bare mulig fordi punkt-6, som fortsatt er i strømmen, har allerede bedt Grid om å lage de ekstra sporene for oss.
Hvorfor trenger du posisjonering med grid? I utgangspunktet kan det virke som overkill. Men når du ser på brutte gridoppsett og beveger seg utover de enkle "over og ned" websidene vi har blitt vant til, tror jeg at du vil finne posisjonering ganske nyttig.
Accentsconagua