Ang posisyon ng mga elemento ng HTML ay gumaganap ng isang mahalagang papel sa pag-aayos ng mga bahagi ng web page. Mas partikular, ang posisyon ng mga elemento ay maaaring iakma sa pamamagitan ng paggamit ng CSS ' posisyon ” ari-arian. Maaaring iugnay ang property na ito sa mga offset na property, gaya ng mga property sa itaas, kaliwa, kanan, at ibaba, na nagbibigay ng mga partikular na value para isaayos ang elemento sa page. Gayunpaman, ang ' ganap ” ang mga nakaposisyong elemento ay maaaring iakma nang may kaugnayan sa pinakamalapit na nakaposisyong elemento.
Ipapaliwanag ng post na ito ang CSS absolute positioning.
CSS 'posisyon' Property
Ang ' posisyon ” Ang property sa CSS ay maaaring gamitin upang ayusin ang posisyon ng elemento. Ang iba't ibang mga halaga ng property ng posisyon ay naayos, ganap, kamag-anak, static, at malagkit. Ang mga value na ito ay nakatakda sa mga offset na katangian, gaya ng itaas, kanan, kaliwa, at ibaba, para sa pagsasaayos ng posisyon ng elemento.
Paano Mag-apply ng CSS Absolute Positioning?
Maaaring ilapat ang ganap na pagpoposisyon ng elemento gamit ang CSS ' posisyon ' ari-arian na may halaga ' ganap ”. Ang elementong may ganap na posisyon ay inaayos na naaayon sa pinakamalapit na nakaposisyon na parent element nito. Ngunit kung ang ninuno ay hindi nakaposisyon, ito ay mag-a-adjust sa bahagi ng katawan ng dokumento.
Halimbawa
Unawain natin ang konsepto na may praktikal na halimbawa.
Hakbang 1: Gumawa ng HTML File
Sa HTML file, sa loob ng body element, magdagdag ng div na may pangalan ng klase na “ pangunahing ”. Pagkatapos, sa loob ng ginawang div, magdagdag ng HTML tag na nauugnay sa mga sumusunod na katangian:
-
- “ src ” ay nagbibigay ng link sa larawan.
- “ klase ” ay ginagamit sa CSS upang i-istilo ang mga elemento.
- “ lahat Tinutukoy ng katangian ng ” ang text na ipinapakita bilang kapalit ng larawan kung ang larawan ay nabigong mag-load sa pahina.
- “ lahat Tinutukoy ng katangian ng ” ang text na lumalabas sa page bilang kapalit ng larawan kung nabigong mag-load ang larawan sa page.
Pagkatapos, magdagdag ng isa pang div na naglalaman ng heading at mga elemento ng h1 at p ng talata:
< div klase = 'pangunahing' >< div klase = 'nilalaman' >
< img src = 'images/linuxlogo.png' klase = 'bahay' lahat = 'logo ng linux' lapad = '80px' >
< h1 > Ang CSS absolute positioning h1 >
< p > Kamusta Linuxhint team ! p >
div >
div >
Sa CSS, maraming mga katangian ng estilo ang ginagamit upang palamutihan ang mga elemento ng HTML.
Hakbang 2: I-istilo ang 'lahat' na Elemento
* {font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Ang mga elemento ng HTML ay naka-istilo gamit ang “ font-family ' ari-arian na may halaga ' Verdana, Geneva, Tahoma, sans-serif ”. Tinitiyak ng listahan ng mga halaga na kung hindi sinusuportahan ng browser ang unang istilo, ilalapat ang isa pa.
Hakbang 3: Istilo ang div
.bahay {posisyon: ganap;
tuktok: 50px;
kaliwa: 45px;
}
Nasa ibaba ang mga katangian na inilapat sa ' bahay ” div:
-
- “ posisyon Ang ” property ay nagtatakda ng posisyon ng elemento. Dito, idinagdag ang ' ganap ” ay maglalagay ng elemento na nauugnay sa seksyon ng katawan ng HTML.
- “ itaas ” Ang ari-arian ay ginagamit para sa patayong pagsasaayos ng elemento.
- “ umalis Ang ” property ay ginagamit para sa pahalang na pagsasaayos ng elemento.
Hakbang 4: Style 'content' div
.nilalaman {kulay ng background: cadetblue;
lapad: 300px;
taas: 250px;
padding-kaliwa: 40px;
margin-kaliwa: 80px;
}
Nasa ibaba ang mga katangian ng CSS na inilalapat sa “ nilalaman ” div:
-
- “ kulay ng background Ang ” property ay nagtatakda ng kulay ng background ng elemento.
- “ lapad Ang property ay nagtatakda ng lapad ng elemento.
- “ taas Itinatakda ng ” property ang taas ng elemento.
- “ padding-kaliwa ” property ay nakatakdang magdagdag ng espasyo sa kaliwang bahagi ng nilalaman ng elemento.
- “ margin-kaliwa Tinutukoy ng ” property ang espasyo sa kaliwang bahagi ng elemento.
Sa puntong ito, magiging ganito ang hitsura ng aming web page:
Makikita mula sa resulta sa itaas na ang larawan ng div home ay inilalagay sa 50px mula sa itaas at 45px mula sa kaliwa ng katawan ng dokumento. Bukod dito, ang posisyon ng home div ay itinakda kaugnay sa body section ng HTML.
Paano I-adjust ang Posisyon ng Elemento na 'relative' sa Positioned Parent Element?
Gagabayan ka ng seksyong ito sa pagsasaayos ng posisyon ng elemento na nauugnay sa pinakamalapit na elemento ng magulang ng posisyon.
Itakda ang 'posisyon' Property ng 'content' div
posisyon: kamag-anak;
Upang ayusin ang posisyon ng elemento na nauugnay sa pangunahing elemento, itakda ang ' posisyon ” pag-aari ng parent element sa “ kamag-anak ” halaga.
Itakda ang 'posisyon' Property ng 'img' Element
.bahay {posisyon: ganap;
tuktok: 100px;
kaliwa: 220px;
}
dito:
-
- “ posisyon ” property na may value na itinakda bilang “ ganap ” ay ipoposisyon na may kaugnayan sa parent na elemento (iyon ay, ang posisyon ng div ng nilalaman ay nakatakda sa kamag-anak ng halaga).
- “ itaas Ang ” property ay ginagamit para sa pagtatakda ng posisyon ng elemento mula sa itaas.
- “ umalis Ang ” property ay ginagamit para sa pagtatakda ng posisyon ng elemento mula sa kaliwa.
Output
Makikita mula sa resulta na ang imahe ay nakaposisyon na may kaugnayan sa parent div nito, at mukhang angkop ito.
Konklusyon
Ang CSS ' posisyon Ang ” property ay ginagamit upang itakda ang posisyon ng mga elemento ng HTML. Maaaring bigyang halaga ang property na ito bilang fixed, relative, absolute, sticky, at static. Ang ' ganap Ipoposisyon ng value ng ” ang elementong tumutugma sa kalapit nitong nakaposisyon na parent element. Ipinaliwanag ng post na ito ang CSS absolute positioning na may praktikal na halimbawa.