HTML-i elementide positsioon mängib veebilehe komponentide korraldamisel üliolulist rolli. Täpsemalt saab elementide asukohta reguleerida CSS-i abil. positsiooni ” vara. Seda atribuuti saab seostada nihkeomadustega, nagu ülemine, vasak, parem ja alumine atribuudid, pakkudes lehel elemendi kohandamiseks konkreetseid väärtusi. Kuid ' absoluutne ” positsioneeritud elemente saab reguleerida lähima positsioneeritud elemendi suhtes.
See postitus selgitab CSS-i absoluutset positsioneerimist.
CSS-i 'positsiooni' atribuut
' positsiooni ” atribuuti CSS-is saab kasutada elemendi asukoha reguleerimiseks. Positsiooni atribuudi erinevad väärtused on fikseeritud, absoluutsed, suhtelised, staatilised ja kleepuvad. Need väärtused määratakse elemendi asukoha reguleerimiseks nihke omadustega, nagu ülemine, parem, vasak ja alumine.
Kuidas rakendada CSS-i absoluutset positsioneerimist?
Elemendi absoluutset positsioneerimist saab rakendada CSS-i abil positsiooni ' vara väärtusega ' absoluutne ”. Absoluutse asukohaga elementi reguleeritakse vastavalt sellele lähimale positsioneeritud põhielemendile. Kuid kui esivanemat pole paigutatud, kohandub see dokumendi kehaosa suhtes.
Näide
Mõistame kontseptsiooni praktilise näitega.
1. samm: looge HTML-fail
Lisage HTML-faili kehaelemendi sisse div klassi nimega ' peamine ”. Seejärel lisage loodud div sisse HTML-i märgend , mis on seotud järgmiste atribuutidega:
-
- “ src ” annab lingi pildile.
- “ klass ” kasutatakse CSS-is elementide stiilimiseks.
- “ kõike ” atribuut määrab teksti, mis kuvatakse pildi asemel, kui pilti ei õnnestu lehele laadida.
- “ kõike ” atribuut määrab teksti, mis kuvatakse lehel pildi asemel, kui pilti ei õnnestu lehele laadida.
Seejärel lisage veel üks div, mis sisaldab pealkirja ja lõigu h1 ja p elemente:
< div klass = 'peamine' >< div klass = 'sisu' >
< img src = 'images/linuxlogo.png' klass = 'Kodu' kõike = 'linuxi logo' laius = '80px' >
< h1 > CSS-i absoluutne positsioneerimine h1 >
< lk > Tere Linuxhinti meeskond ! lk >
div >
div >
CSS-is kasutatakse HTML-i elementide kaunistamiseks mitmeid stiiliomadusi.
2. samm: kujundage kõik elemendid stiiliks
* {fondiperekond: Verdana, Genf, Tahoma, sans-serif;
}
HTML-i elemendid on kujundatud kasutades ' font-perekond ' vara väärtusega ' Verdana, Genf, Tahoma, sans-serif ”. See väärtuste loend tagab, et kui brauser ei toeta esimest stiili, rakendatakse teist.
3. samm: stiilige 'kodu' jaotus
.Kodu {positsioon: absoluutne;
ülemine: 50 pikslit;
vasakul: 45px;
}
Allpool on toodud atribuudid, mida rakendatakse Kodu ” div:
-
- “ positsiooni ” atribuut määrab elemendi asukoha. Siin on lisatud ' absoluutne ” paigutab elemendi HTML-i kehaosa suhtes.
- “ üleval ” omadust kasutatakse elemendi vertikaalseks reguleerimiseks.
- “ vasakule ” omadust kasutatakse elemendi horisontaalseks reguleerimiseks.
4. samm: stiilige „sisu” jaotus
.sisu {taustavärv: kadetsinine;
laius: 300 pikslit;
kõrgus: 250 pikslit;
polster-vasak: 40px;
veeris vasak: 80 pikslit;
}
Allpool on toodud CSS-i atribuudid, mida rakendatakse sisu ” div:
-
- “ taustavärv ” atribuut määrab elemendi taustavärvi.
- “ laius ” atribuut määrab elemendi laiuse.
- “ kõrgus ” atribuut määrab elemendi kõrguse.
- “ polster-vasak ” atribuut on seatud lisama ruumi elemendi sisu vasakusse serva.
- “ margin-vasak ” atribuut määrab ruumi elemendi vasakul küljel.
Sel hetkel näeb meie veebileht välja selline:
Ülaltoodud tulemusest on näha, et div kodu kujutis on paigutatud dokumendi põhiosa ülaosast 50 pikslit ja vasakult 45 pikslit. Veelgi enam, kodu div asukoht määratakse HTML-i kehaosa suhtes.
Kuidas kohandada elemendi positsiooni 'suhteliselt' positsioneeritud emaelemendiga?
See jaotis juhendab teid, kuidas kohandada elemendi asukohta lähima positsiooni põhielemendi suhtes.
Määra 'positsioon' Jaotise 'sisu' omadus
asend: suhteline;
Elemendi asukoha reguleerimiseks põhielemendi suhtes määrake ' positsiooni ' emaelemendi atribuut ' sugulane ” väärtus.
Määrake 'positsioon' Elemendi 'img' omadus
.Kodu {positsioon: absoluutne;
ülemine: 100 pikslit;
vasakul: 220 pikslit;
}
Siin:
-
- “ positsiooni ' atribuut väärtusega ' absoluutne ” paigutatakse lähteelemendi suhtes (st sisu div asukoht määratakse suhtelise väärtusega).
- “ üleval ” atribuuti kasutatakse elemendi asukoha määramiseks ülalt.
- “ vasakule ” atribuuti kasutatakse elemendi asukoha määramiseks vasakult.
Väljund
Tulemusest on näha, et pilt on positsioneeritud oma vanema div suhtes ja see näeb välja sobiv.
Järeldus
CSS' positsiooni ” atribuuti kasutatakse HTML-i elementide asukoha määramiseks. Seda omadust saab hinnata fikseeritud, suhtelise, absoluutse, kleepuva ja staatilisena. ' absoluutne ” väärtus positsioneerib elemendi, mis vastab selle lähedal asuvale emaelemendile. See postitus on selgitanud CSS-i absoluutset positsioneerimist praktilise näitega.