Share
Det är ganska möjligt att använda CSS-positionering på rutnät, precis som du skulle med de flesta andra element. Det finns en eller två quirks, men låt oss ta en snabb titt för att du ska undvika fallgroparna.
Låt oss börja med ett enkelt rutnät, med nio föremål, utlagda i tre kolumner. Varje kolumn är 1fr bred, förutom den tredje kolumnen som (tack vare min Max()) krymper inte mindre än 160px:
rutmall-kolumner: 1fr 1fr minmax (160px, 1fr);
Genom att lägga till ett par regler på ett av objekten kan vi placera det relativt:
.punkt 2 position: relativ; höger: 100px; topp: 30px;
Så precis som vi kan förvänta, förklarar vi det item-2 ska placeras relativt, definiera sedan vissa kompensationsegenskaper (men försök inte använda fr-enheten på dessa, det fungerar inte).
Om du ändrar storleken på fönstret märker du att rasterobjektet fortsätter att fungera (ändra storlek) precis som det var innan vi placerade det och det är fortfarande själviskt att reservera platsen i rutan om det känns som att komma tillbaka.
Så vad händer när vi absolut placera det objektet? För det första kommer den att positionera sig mot sin närmaste förfader som har ett deklarerat positionsvärde. Om du inte ställer in position: relativ; (till exempel) på rutnätet flyger rutnätet ut ur gallrets gränser för att leta efter något annat att hålla fast vid, till exempel HTML-elementet.
Du ser i demon ovan att objektet nu är absolut placerat 100px från vänster och 30px från toppen av gallret behållaren. Det har effektivt tagits bort från dokumentflödet, vilket är normalt med absolut positionerade element. Dess plats i gallret har fyllts av item-3 och de andra föremålen har placerat sig för att fylla de återstående luckorna.
Notera: Om vår nätbehållare skulle ha vadderar skulle positioneringen vara i relation till de yttre vadderande gränserna.
Du ser också att den inte längre har de mått den använde när den var en del av gallret. Den har krympt till innehållets storlek. Ristet påverkar inte elementets limning, och elementet påverkar inte på något sätt storleken på nätet.
Det kan ta lite att vänja sig, men förutom de normala förskjutningarna kan du också placera ett rutnät med hjälp av nätverksplaceringsegenskaperna. Till exempel, låt oss placera vår item-2 absolut på gallerområde: 3/2; (med andra ord, med början på den tredje raden ned och den andra kolumnen över).
Det ser märkligt ut, men du kan se att föremålet, som fortfarande är opåverkat av gridens storlek och fortfarande utanför flödet, har placerat sig fritt ovanpå item-9. Det är som om det har ett rutnät helt eget, ovanpå originalet.
Notera: z-index gör att du kan ändra stackningsordningen för objekten om du vill.
Att fortsätta, om vi sedan lägger en förskjutning i mixen (topp: 50px; till exempel) kommer vårt objekt att tillämpa den förskjutningen, medan den fortfarande är sann mot sin egen imaginära rutnätplacering:
I vår tidigare handledning talade vi om hur Grid ska skapa implicit spårar om de behövs spår bortom de som vi uttryckligen definierar. Vi kan placera objekt på de implicita rutspåren om de finns, men Grid kommer inte skapa de spårar för element utanför flödet.
I demon nedan har vi placerat item-2 på gallerområde: 2/4; men detta är bara möjligt eftersom item-6, som fortfarande är i flödet, har redan uppmanat Grid att skapa de extra spåren för oss.
Varför skulle du behöva positionera med nätet? Ursprungligen kan det verka som överkill. Men när du överväger brutna rutnätlayouter och flyttar bortom de raka "över och ner" webbsidorna har vi blivit vana vid, jag tror att du hittar positionering ganska användbar.
Accentsconagua