CSS pozicionēšana ir vairāk nekā tikai X, Y koordinātas
CSS pozicionēšana jau sen ir svarīga tīmekļa vietņu izveidošanas sastāvdaļa. Pat ar jaunāku CSS izkārtojuma paņēmienu, piemēram, Flexbox un CSS Grid palielināšanos, pozicionēšanai joprojām ir svarīga vieta jebkura tīmekļa dizainera maisā ar trikiem.
Izmantojot CSS pozicionēšanu, pirmā lieta, kas jums būs jādara, ir CSS īpašuma iestatīšana, lai pozīcija norādītu pārlūkprogrammai, ja vēlaties izmantot konkrētu elementu absolūtu vai relatīvu pozicionēšanu. Jums arī ir skaidri 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ā ir noklusējuma pozīcija jebkuram elementam tīmekļa lapā. Ja jūs neesat definējis kāda elementa pozīciju, tas būs statisks. Tas nozīmē, ka tas tiks parādīts ekrānā, pamatojoties uz to, kur tas atrodas HTML dokumentā, un to, kā tas parādīsies šī dokumenta normālajā plūsmā .
Ja jūs pielietojat pozicionēšanas noteikumus, piemēram, augšējo vai kreiso elementu, kuram ir statisks stāvoklis, šie noteikumi tiks ignorēti un elements paliks tur, kur tas parādās normālā dokumentu plūsmā. Patiesībā, jūs reti, ja tāds jebkad vajadzēs iestatīt elementu statiskā stāvoklī 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 neostīti novietoto priekšteci.
Tā kā pilnīgi novietots elements tiek izņemts no parastās dokumenta plūsmas, tas neietekmēs to, kā elementi pirms tā vai pēc tam HTML tiek novietoti tīmekļa lapā.
Piemēram, ja jums bija sadalījums, kas tika novietots, izmantojot relatīvo vērtību (mēs drīzumā skatīsimies uz šo vērtību), un šajā nodaļā bija rindkopas, par kuru vēlaties izvietot 50 pikseļus no nodaļas augšdaļas, jūs pievienotu šī punkta "absolūto" pozīcijas vērtību kopā ar 50 piksu lielu ieskaitu "augšējā" īpašumā, piemēram, šo.
amats: absolūti; top: 50 pikseļi;Šis absolūti pozicionētais elements tad vienmēr rādītu 50 pikseļus no šī salīdzinoši novietotā sadalījuma virsotnes - neatkarīgi no tā, ko vēl parāda normālā plūsmā. Jūsu "absolūti" novietots elements izmantoja relatīvi novietoto kā tā kontekstu, un izmantoto vērtību vērtība ir relatīva.
Četras pozicionēšanas īpašības, kuras jums ir pieejamas, ir šādas:
- tops
- pa labi
- apakšā
- pa kreisi
Varat izmantot gan augšā, gan apakšā (jo elementu nevar novietot atbilstoši abām šīm vērtībām) un vai nu pa labi, vai pa kreisi.
Ja elements ir iestatīts uz absolūto pozīciju, bet tajā nav netatistiski novietotu priekšteču, tad tas tiks novietots attiecībā pret ķermeņa elementu, kas ir lapas augstākā līmeņa elements.
Relatīvā pozicionēšana
Mēs jau minējām relatīvo pozicionēšanu, tāpēc apskatīsim šo īpašumu tūlīt.
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ās tuvāko neostēti novietoto priekšteci, tas sākas no vietas, kur elements būtu, ja tas būtu vēl normālā plūsmā.
Piemēram, ja jūsu tīmekļa lapā ir trīs punkti un trešajā ir izvietots uz tā izvietotā stila "Position: Relative", šī pozīcija tiks kompensēta, ņemot vērā tā pašreizējo atrašanās vietu.
1. punkts.
2. punkts.
3. punkts.
Iepriekš minētajā piemērā trešais punkts tiks novietots 2em no konteinera elementa kreisās puses, taču tas joprojām būs zem pirmajiem diviem punktiem. Tas paliktu normālā dokumenta plūsmā, un to vienkārši nedaudz kompensē. Ja jūs mainījāt to pozīcijā: absolūti; Turpmāk tas parādīsies virs tā, jo tas vairs nebūs normālā dokumenta plūsmā.
Mājas lapas elementi bieži tiek izmantoti, lai iestatītu pozīcijas vērtību: relatīvais bez iestatīta ieskaita 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 sadaļa, kas attiecas uz visu jūsu vietni ar klases vērtību "konteiners" (kas ir ļoti izplatīts tīmekļa dizaina scenārijs), šo sadalījumu var iestatīt relatīvā stāvoklī, lai to varētu izmantot jebkurā vietā to kā pozicionēšanas kontekstu.
Kas par fiksēto pozicionēšanu?
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 ritināsies pāri šim elementam.
Lai izmantotu šo īpašuma vērtību, jūs varētu iestatīt:
pozīcija: fiksēta;Paturiet prātā, ka, ja jūs savā vietnē noteiksiet elementu, tas izdrukās tajā vietā, kad tiks izdrukāta jūsu tīmekļa lapa. 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 # first {position: fixed; }} @media print {h1 # first {position: static; }}Jennifera Krīnina oriģinālais raksts. Rediģējis Jeremijs Girards 1./7/16.