HTML elementu pozīcijai ir būtiska loma tīmekļa lapas komponentu organizēšanā. Precīzāk, elementu novietojumu var pielāgot, izmantojot CSS. pozīciju ” īpašums. Šo rekvizītu var saistīt ar nobīdes rekvizītiem, piemēram, augšējo, kreiso, labo un apakšējo rekvizītus, nodrošinot konkrētas vērtības, lai lapā pielāgotu elementu. Tomēr ' absolūts ” pozicionētos elementus var noregulēt attiecībā pret tuvāko novietoto elementu.
Šajā rakstā tiks izskaidrota CSS absolūtā pozicionēšana.
CSS “pozīcijas” rekvizīts
' pozīciju ” rekvizītu CSS var izmantot, lai pielāgotu elementa pozīciju. Dažādas pozīcijas rekvizīta vērtības ir fiksētas, absolūtas, relatīvas, statiskas un nemainīgas. Šīs vērtības tiek iestatītas ar nobīdes rekvizītiem, piemēram, augšā, pa labi, pa kreisi un apakšā, lai pielāgotu elementa pozīciju.
Kā lietot CSS absolūto pozicionēšanu?
Elementa absolūto pozicionēšanu var izmantot, izmantojot CSS ' pozīciju 'īpašums ar vērtību' absolūts ”. Elements ar absolūto pozīciju tiek noregulēts atbilstoši tā tuvākajam pozicionētajam pamatelementam. Bet, ja priekštecis nav novietots, tas pielāgosies attiecībā pret dokumenta ķermeņa daļu.
Piemērs
Izpratīsim jēdzienu ar praktisku piemēru.
1. darbība. Izveidojiet HTML failu
HTML failā ķermeņa elementā pievienojiet div ar klases nosaukumu ' galvenais ”. Pēc tam izveidotajā div pievienojiet HTML tagu , kas saistīts ar šādiem atribūtiem:
-
- ' src ” nodrošina saiti uz attēlu.
- ' klasē ” tiek izmantots CSS, lai veidotu elementus.
- ' viss ” atribūts norāda tekstu, kas tiek rādīts attēla vietā, ja attēlu neizdodas ielādēt lapā.
- ' viss ” atribūts norāda tekstu, kas tiek rādīts lapā attēla vietā, ja attēlu neizdodas ielādēt lapā.
Pēc tam pievienojiet vēl vienu div, kas satur virsraksta un rindkopas h1 un p elementus:
< div klasē = 'galvenais' >< div klasē = 'saturs' >
< img src = 'images/linuxlogo.png' klasē = 'mājas' viss = 'Linux logotips' platums = '80 pikseļi' >
< h1 > CSS absolūtā pozicionēšana h1 >
< lpp > Sveiki, Linuxhint komanda ! lpp >
div >
div >
CSS HTML elementu dekorēšanai tiek izmantoti vairāki stila rekvizīti.
2. darbība: izveidojiet stilu “visi” elementi
* {fontu saime: Verdana, Geneva, Tahoma, sans-serif;
}
HTML elementi tiek veidoti, izmantojot ' fontu ģimene 'īpašums ar vērtību' Verdana, Ženēva, Tahoma, sans-serif ”. Šis vērtību saraksts nodrošina, ka, ja pārlūkprogramma neatbalsta pirmo stilu, tiks lietots otrs.
3. darbība: stila “mājas” sadaļa
.mājas {pozīcija: absolūta;
augšpusē: 50 pikseļi;
pa kreisi: 45 pikseļi;
}
Tālāk ir norādīti rekvizīti, kas attiecas uz ' mājas ” div:
-
- ' pozīciju ” rekvizīts nosaka elementa pozīciju. Šeit pievienotais ' absolūts ” izvietos elementu attiecībā pret HTML pamatdaļas sadaļu.
- ' tops ” īpašība tiek izmantota elementa vertikālai regulēšanai.
- ' pa kreisi ” īpašība tiek izmantota elementa horizontālai regulēšanai.
4. darbība. Stila “satura” sadaļa
.saturs {fona krāsa: kadetzils;
platums: 300 pikseļi;
augstums: 250 pikseļi;
polsterējums pa kreisi: 40 pikseļi;
piemale-kreisais: 80 pikseļi;
}
Tālāk ir norādīti CSS rekvizīti, kas tiek lietoti saturu ” div:
-
- ' fona krāsa Īpašums iestata elementa fona krāsu.
- ' platums ” rekvizīts nosaka elementa platumu.
- ' augstums ” rekvizīts nosaka elementa augstumu.
- ' polsterējums-pa kreisi Īpašums ir iestatīts, lai pievienotu atstarpi elementa satura kreisajā pusē.
- ' piemale-kreisais ” rekvizīts norāda atstarpi elementa kreisajā pusē.
Šajā brīdī mūsu tīmekļa lapa izskatīsies šādi:
No iepriekš minētā rezultāta var redzēt, ka div sākumlapas attēls ir novietots 50 pikseļus no augšas un 45 pikseļus no dokumenta pamatteksta kreisās puses. Turklāt sākuma div pozīcija ir iestatīta attiecībā pret HTML pamatsadaļu.
Kā pielāgot elementa pozīciju “attiecībā” pret pozicionēto vecāku elementu?
Šī sadaļa palīdzēs jums pielāgot elementa pozīciju attiecībā pret tuvākās pozīcijas vecākelementu.
Iestatīt “pozīcija” Satura īpašība div
pozīcija: relatīvs;
Lai pielāgotu elementa pozīciju attiecībā pret vecākelementu, iestatiet “ pozīciju ' vecāka elementa īpašums uz ' radinieks ” vērtību.
Iestatiet “pozīcija” Elementa “img” īpašību
.mājas {pozīcija: absolūta;
augšpusē: 100 pikseļi;
pa kreisi: 220 pikseļi;
}
Šeit:
-
- ' pozīciju ' rekvizīts ar vērtību, kas iestatīta kā ' absolūts ” tiks novietots attiecībā pret vecākelementu (tas ir, satura div pozīcija ir iestatīta ar relatīvo vērtību).
- ' tops ” rekvizīts tiek izmantots, lai iestatītu elementa pozīciju no augšas.
- ' pa kreisi ” rekvizīts tiek izmantots, lai iestatītu elementa pozīciju no kreisās puses.
Izvade
Pēc rezultāta var redzēt, ka attēls ir novietots attiecībā pret tā vecāku div, un tas izskatās piemērots.
Secinājums
CSS ' pozīciju ” rekvizīts tiek izmantots, lai iestatītu HTML elementu pozīciju. Šo īpašumu var novērtēt kā fiksētu, relatīvu, absolūtu, lipīgu un statisku. ' absolūts ” vērtība pozicionēs elementu atbilstoši tā tuvumā esošajam vecākelementam. Šajā rakstā ir izskaidrota CSS absolūtā pozicionēšana ar praktisku piemēru.