CSS pozicionēšana jau sen ir svarīga tīmekļa vietņu izveidošanas sastāvdaļa. Pat ja CSS izkārtojuma paņēmieni, piemēram, Flexbox un CSS Grid, palielinās, pozicionēšana joprojām ir svarīga vieta jebkura tīmekļa dizainera maisā ar trikiem.
Izmantojot CSS pozicionēšanu, pirmā lieta, kas jums jādara, ir izveidot CSS īpašumu pozīcijai, lai pastāstītu pārlūkprogrammai, vai izmantosit konkrētu elementu absolūtu vai relatīvu pozicionēšanu. Jums arī jāsaprot atšķirība starp šīm divām pozicionēšanas īpašībām.
Kamēr absolūti un relatīvi ir divas CSS pozīcijas īpašības, kuras visbiežāk izmanto tīmekļa dizains, atrašanās vietas īpašībām ir faktiski četri stāvokļi:
- statisks
- absolūti
- radinieks
- fiksēts
Statiskā pozicionēšana
Static ir noklusējuma pozīcija jebkuram elementam tīmekļa lapā. Ja neesat definējis kāda elementa pozīciju, tas ir statisks, kas nozīmē, ka tas tiek rādīts ekrānā, pamatojoties uz to, kur tas atrodas HTML dokumentā, un to, kā tas parādās šī dokumenta parastā plūsmā.
Ja jūs pielietojat pozicionēšanas noteikumus, piemēram, tops vai pa kreisi uz elementu, kuram ir statisks stāvoklis, šie noteikumi tiek ignorēti un elements paliek vietā, kur tas parādās normālā dokumentu plūsmā. Jūs reti, ja tāds jebkad, ir nepieciešams iestatīt elementu statiskā pozīcijā CSS, jo tā ir noklusējuma vērtība.
Absolūtā CSS pozicionēšana
Absolūtā pozicionēšana, iespējams, ir vienkāršākā CSS pozīcija, lai to saprastu. Jūs sākat ar šo CSS pozīcijas īpašību:
amats: absolūti;
Šī vērtība norāda pārlūkprogrammai, ka viss, kas tiks novietots, ir jānoņem no parastās dokumenta plūsmas un tā vietā tiek ievietota precīzā lapā. Tas tiek aprēķināts, pamatojoties uz šī elementa tuvāko ne statistiski novietoto priekšteci. Tā kā pilnīgi novietots elements tiek izņemts no parastās dokumenta plūsmas, tas ietekmē to, kā elementi pirms tā vai pēc tam HTML tiek novietoti tīmekļa lapā. Piemēram, ja jums ir sadalīšana, kas tiek novietota, izmantojot relatīvo vērtību un iekšpusē šo sadalījumu, jums ir punkts, kurā vēlaties novietot 50 pikseļus no sadalījuma augšdaļas, jūs pievienojat pozīcijas vērtību absolūti uz šo punktu kopā ar kompensācijas vērtību 50 pikseļi uz tops īpašums, piemēram: amats: absolūti;top: 50 pikseļi;
Šis absolūti pozicionētais elements vienmēr parāda 50 pikseļus no šī salīdzinoši novietotā sadalījuma augšējās virsmas neatkarīgi no tā, ko vēl parāda normālā plūsmā. Jūsu absolūti pozicionētais elements izmanto relatīvi novietotu kā kontekstu, un jūsu izmantotā pozicionēšanas vērtība ir salīdzināma ar to. Četras pozicionēšanas īpašības, kuras jums ir pieejamas, ir šādas: Jūs varat to izmantot vai nu tops vai apakšā - jo elementu nevar novietot pēc abām šīm vērtībām - un nu pa labi vai pa kreisi. Ja elements ir iestatīts uz absolūto pozīciju, bet tam nav netatistiski novietotie priekšteči, tad tas ir novietots attiecībā pret ķermeņa elementu, kas ir lapas augstākā līmeņa elements. Relatīvā pozicionēšana izmanto tādas pašas četras pozicionēšanas īpašības kā absolūtā pozicionēšana, bet tā vietā, lai balstītu elementa pozīciju uz tā tuvāko ne statistiski novietoto priekšteci, tā sākas no vietas, kur elements būtu, ja tas vēl būtu normālā plūsmā. Piemēram, ja jūsu tīmekļa lapā ir trīs punkti, bet trešajā - pozīcija: radinieks uz tā izvietots stils, tā pozīcija ir kompensēta, pamatojoties uz tā pašreizējo atrašanās vietu. 1. punkts 2. punkts 3. punkts. Iepriekš minētajā piemērā trešais punkts ir novietots 2em no konteinera elementa kreisās puses, bet joprojām ir zem pirmajiem diviem punktiem. Tas paliek dokumenta normālā plūsmā un nedaudz nobīde. Ja jūs maināt to amats: absolūts, uz tā virsmas parādās kaut kas pēc tā, ka tas vairs nav normālā dokumenta plūsmā. Mājas lapas elementi bieži tiek lietoti, lai iestatītu vērtību pozīcija: radinieks bez kompensācijas vērtības, kas nozīmē, ka elements paliek tieši tajā vietā, kur tas parādās normālā plūsmā. Tas tiek darīts vienīgi, lai noteiktu šo elementu kā kontekstu, pret kuru citi elementi var būt pilnīgi novietoti. Piemēram, ja jums ir sadalījums visā jūsu vietnē ar klases vērtību konteiners, kas ir kopīgs tīmekļa dizaina scenārijs, šo sadalījumu var iestatīt kā pozīciju radinieks tā, ka kaut kas iekšpusē to var izmantot kā pozicionēšanas kontekstu. Fiksētā pozicionēšana ir ļoti līdzīga absolūtai pozicionēšanai. Elementa pozīcija tiek aprēķināta tāpat kā absolūtais modelis, bet fiksētie elementi tiek fiksēti šajā vietā - gandrīz kā ūdenszīme. Viss pārējais lapā pēc tam ritina iepriekšējo elementu. Lai izmantotu šo īpašuma vērtību, jūs iestatāt: pozīcija: fiksēta;
Paturiet prātā, ka, ja jūs savā vietnē noteiksiet elementu, tas izdrukās tajā vietā, kad jūsu tīmekļa lapa tiks izdrukāta. Piemēram, ja jūsu elements ir fiksēts jūsu lapas augšdaļā, tas parādīsies katras izdrukātās lapas augšdaļā, jo tas ir piestiprināts lapas augšdaļai. Varat izmantot multivides veidus, lai mainītu, kā drukātajās lapās tiek rādīti fiksētie elementi: @media screen { h1 # pirmais {stāvoklis: fiksēts; } } @media print { h1 # pirmais {stāvoklis: statisks; } }
Relatīvā pozicionēšana
Kas par fiksēto pozicionēšanu?
