CSS pasaule mūs iepazīstina ar dažādiem noteikumiem un nosacījumiem. CSS ir svarīga programmēšanas valoda HTML (iezīmēšanas valoda).
To izmanto vairāki profesionāli datoru eksperti un datoru analītiķi. Divi termini, relatīvā pozicionēšana un absolūtā pozicionēšana, ir CSS programmēšanas valodā.
Atslēgas
- Relatīvā pozicionēšana pārvieto elementu attiecībā pret tā sākotnējo pozīciju, neietekmējot citu elementu izkārtojumu.
- Absolūtā pozicionēšana noņem elementu no dokumenta plūsmas un novieto to attiecībā pret tuvāko pozicionēto priekšteci.
- Relatīvā pozicionēšana saglabā elementa pozīciju dokumenta plūsmā, savukārt absolūtā pozicionēšana var pārklāties vai izjaukt citus elementus.
Relatīvā pozicionēšana pret absolūto pozicionēšanu CSS
Relatīvā pozicionēšana ir saistīta ar elementa kustību dokumentā. Dokumenta izkārtojums relatīvajā pozicionējumā nemainās. Absolūtā pozicionēšana ir saistīta ar elementa pārvietošanos dažādos dokumentos vai no viena dokumenta uz otru. Dokumenta izkārtojumu var mainīt absolūtā pozicionēšanā.
Relatīvā pozicionēšana CSS ir viens no vērtīgākajiem terminiem (ko lieto datoru analītiķi) programmēšanā.
Tas pārvieto elementu tā, lai tas paliktu attiecībā pret sākotnējo pozīciju. Termins “relatīvais” attiecas uz kaut ko, kas mērīts proporcionāli veselumam.
Tas nemaina dokumenta izkārtojumu. Tas pārvieto objektu pa kreisi, pa labi, uz augšu un uz leju.
Absolūtā pozicionēšana CSS ir vērtīgs pozīcijas veids, kas palīdz novietot elementu, kur vien vēlaties.
Tās animācijas veids ir diskrēts (līdzīgs relatīvās pozīcijas animācijas veidam). Šīs pozīcijas g-kods ir G90. Absolūtā pozīcija vienmēr novieto elementu attiecībā pret vecāku.
Šis pozīcijas veids attiecas uz nosauktajiem elementiem.
Salīdzināšanas tabula
| Salīdzinājuma parametri | Relatīvā pozicionēšana CSS | Absolūtā pozicionēšana CSS |
|---|---|---|
| funkcija | Relatīvā pozicionēšana pārvieto elementu dokumentā uz kreiso, labo, augšējo vai apakšējo apgabalu. | Absolūtā pozicionēšana pārvieto elementu no vienas dokumenta plūsmas uz citu dokumentu plūsmu. |
| Kad lietot | Relatīvā pozicionēšana tiek izmantota, ja konkrētas lapas iekšējais elements tiks novietots absolūti. | Ja lapas elementa iekšējais elements atrodas relatīvi, tiek izmantota absolūtā pozicionēšana. |
| Reaģēt native | Relatīvā pozicionēšana ir absolūta vecākam. | Absolūtā pozicionēšana ir saistīta ar vecāku. |
| Normāla dokumentu plūsma | Relatīvā pozicionēšana ir elements parastajā dokumentu plūsmā. | Absolūtā pozicionēšana izņem elementu no parastās dokumentu plūsmas. |
| Izkārtojums | Šajā gadījumā izkārtojums netiek mainīts vai paliek nemainīgs. | Absolūtās pozicionēšanas gadījumā ir mainīts izkārtojums. |
Kas ir relatīvā pozicionēšana CSS?
Relatīvā pozicionēšana CSS ir viens no vērtīgākajiem pozicionēšanas veidiem programmēšanas pasaulē.
Šī pozicionēšana tiek izmantota, ja konkrēta elementa iekšējais elements ir jānovieto absolūti.
Relatīvā pozicionēšanā elements vienmēr tiek novietots absolūtā vietā un attiecībā pret tā parasto pozīciju.
CSS relatīvā pozicionēšana liek elementam pārvietoties pa kreisi, pa labi, apakšējā vai augšējā pozīcijā.
Šāda veida izkārtojums var radīt dažas tukšas vietas vai spraugas, kuras nevar aizpildīt. Šāda veida pozicionēšana nemaina izkārtojumu.
Lai saprastu terminu “relatīvā pozicionēšana”, ir jāsaprot vairākas detaļas. Tālāk ir norādītas dažas no šīm detaļām.
- Animācijas veids - Diskrēts
- Aprēķinātā vērtība – kā norādīts
- Noklusējuma vērtība — statiska
Relatīvā pozicionēšana saglabā elementu parastajā dokumentā plūsma. Elementa parastā pozīcija paliek dokumentā, līdzīgi kā statiskā vērtība. CSS šim pozicionēšanas veidam piešķir unikālu atbildību.
Relatīvā pozicionēšana nodrošina vairākas funkcijas. Dažas no šīm funkcijām ir:
- Tas palīdz noteikt elementa pozīciju/atrašanos.
- Tas palīdz pielāgot elementa pozīciju tā sākotnējā stāvoklī.
- Relatīvā pozicionēšana dod iespēju pozicionēt iekšējos elementus (lapas elementā).
Kas ir absolūtā pozicionēšana CSS?
Absolūtā pozicionēšana CSS ir unikāls pozicionēšanas veids, kas maina lapas izkārtojumu.
Šis pozicionēšanas veids izņem elementu no parastās dokumentu plūsmas; tādējādi citi elementi tiek novietoti tā, kā šis konkrētais elements nekad nav pastāvējis.
Absolūtajā pozicionēšanā elements vienmēr tiek novietots attiecībā pret vecāku un absolūti pret tā parasto pozīciju.
CSS absolūtā pozicionēšana tiek izmantota, ja konkrēta elementa lapas iekšējais elements ir jānovieto relatīvi. Nosauktajiem elementiem tiek izmantota absolūtā pozicionēšana.
Tas nedarbojas klasēs vai vispārīgos elementu tipos. Galvenais šāda veida pozicionēšanas princips ir tāds, ka tas vienlaikus darbojas tikai vienā elementā.
Vairāki datoru analītiķi un speciālisti nezina, kā centrēt elementu, izmantojot absolūto pozicionēšanu.
Tālāk ir norādītas dažas darbības, kā veikt elementa centrēšanu, izmantojot šāda veida pozicionēšanu.
- Pievienojiet pa kreisi 50℅ no elementa, kuru vēlaties centrēt.
- Pievienojiet negatīvu kreiso piemali, kas ir vienāda ar pusi no elementa platuma.
- Pēc tam pievienojiet augšdaļu līdz 50℅ elementa, kuru vēlaties centrēt.
- Un visbeidzot pievienojiet negatīvu augšējo malu, kas ir vienāda ar pusi no rīka platuma.
Galvenās atšķirības starp relatīvo pozicionēšanu un absolūto pozicionēšanu CSS
- Relatīvā pozicionēšana ir absolūta tās vecākajam, savukārt, no otras puses, absolūtā pozicionēšana ir saistīta ar tās vecāku.
- Relatīvā pozicionēšana pārvieto elementu ar noteiktu dokumenta izkārtojumu, bet, no otras puses, absolūtā pozicionēšana pārvieto elementu no viena dokumenta uz citu.
- Relatīvās pozicionēšanas gadījumā izkārtojums paliek nemainīgs, savukārt, no otras puses, absolūtā pozicionēšana maina izkārtojumu.
- Elements paliek normālā dokumenta plūsmā attiecībā pret, bet, no otras puses, absolūtā pozicionēšanā elements tiek izņemts no parastās dokumentu plūsmas.
- Relatīvā pozicionēšanā iekšējais elements tiek pozicionēts relatīvi, savukārt, absolūtā pozicionējumā iekšējais elements tiek pozicionēts absolūti.
- https://dl.acm.org/doi/abs/10.1145/1067170.1067190
- https://link.springer.com/article/10.1007/PL00012910
Pēdējo reizi atjaunināts: 26. gada 2023. jūlijā
Esmu pielicis tik daudz pūļu, rakstot šo emuāra ierakstu, lai sniegtu jums vērtību. Tas man ļoti noderēs, ja apsverat iespēju to kopīgot sociālajos medijos vai ar draugiem/ģimeni. DALĪŠANĀS IR ♥️
Sandeep Bhandari ir ieguvis inženierzinātņu bakalaura grādu datorzinātnēs Tapara universitātē (2006). Viņam ir 20 gadu pieredze tehnoloģiju jomā. Viņam ir liela interese par dažādām tehniskajām jomām, tostarp datu bāzu sistēmām, datortīkliem un programmēšanu. Vairāk par viņu varat lasīt viņa vietnē bio lapa.
