Ang pagpoposisyon ng CSS ay matagal nang naging mahalagang bahagi ng paglikha ng mga layout ng website. Kahit na may pagtaas ng mga diskarte sa CSS layout tulad ng Flexbox at CSS Grid, ang pagpoposisyon ay mayroon pa ring mahalagang lugar sa anumang bag ng web designer ng mga trick.
Kapag gumagamit ng pagpoposisyon ng CSS, ang unang bagay na kailangan mong gawin ay ang pagtatatag ng property ng CSS para sa posisyon upang sabihin sa browser kung gagamit ka ng absolute o relative positioning para sa isang ibinigay na elemento. Kailangan mo ring maunawaan ang pagkakaiba sa pagitan ng dalawang mga katangian ng pagpoposisyon.
Habang ang absolute at kamag-anak ay ang dalawang katangian ng posisyon ng CSS na kadalasang ginagamit sa disenyo ng web, may aktwal na apat na estado sa posisyon ng ari-arian:
- static
- ganap
- kamag-anak
- nakapirming
Static Positioning
Static ang default na posisyon para sa anumang elemento sa isang webpage. Kung hindi mo tukuyin ang posisyon ng isang elemento, ito ay static, na nangangahulugang nagpapakita ito sa screen batay sa kung saan ito ay nasa HTML na dokumento at kung paano ito nagpapakita sa loob ng normal na daloy ng dokumentong iyon.
Kung inilalapat mo ang mga panuntunan sa pagpoposisyon tulad ng itaas o kaliwa sa isang sangkap na may static na posisyon, ang mga panuntunang ito ay hindi pinansin, at nananatili ang elemento kung saan lumilitaw ito sa normal na daloy ng dokumento. Bihira ka, kung mayroon man, kailangan mong itakda ang isang elemento sa isang static na posisyon sa CSS dahil ito ay ang default na halaga.
Ganap na Posisyon ng CSS
Ang absolute positioning ay marahil ang pinakamadaling posisyon ng CSS na maunawaan. Magsisimula ka sa property na ito ng CSS na posisyon:
posisyon: absolute;
Ang halaga na ito ay nagsasabi sa browser na anuman ang ipoposisyon ay dapat alisin mula sa normal na daloy ng dokumento at sa halip ay ilagay sa isang eksaktong lokasyon sa pahina. Ito ay kinakalkula batay sa pinakamalapit na di-statically nakatuon ninuno na elemento. Dahil ang isang ganap na naka-posisyon na sangkap ay kinuha sa labas ng normal na daloy ng dokumento, nakakaapekto ito kung paano ang mga elemento bago ito o pagkatapos nito sa HTML ay nakaposisyon sa webpage. Bilang isang halimbawa, kung mayroon kang isang dibisyon na nakaposisyon gamit ang isang halaga ng kamag-anak at sa loob ng dibisyon na iyon, mayroon kang isang talata na nais mong i-posisyon ang 50 pixel mula sa itaas ng dibisyon, idagdag mo ang isang halaga ng posisyon ng ganap sa talata na iyon kasama ang isang offset na halaga ng 50px sa itaas ari-arian, tulad nito: posisyon: absolute;itaas: 50px;
Ang ganap na nakaposisyon na elemento ay laging nagpapakita ng 50 pixel mula sa tuktok ng medyo nakaposisyon na dibisyon, anuman ang ipinapakita ng iba pa sa normal na daloy. Ang iyong ganap na nakaposisyon elemento ay gumagamit ng relatibong nakaposisyon isa bilang konteksto nito, at ang halaga ng pagpoposisyon na ginagamit mo ay may kaugnayan sa na. Ang apat na katangian ng pagpoposisyon na magagamit mo ay ang mga: Maaari mong gamitin ang alinman itaas o ibaba - dahil ang isang elemento ay hindi maaaring nakaposisyon ayon sa parehong mga halagang ito - at alinman tama o kaliwa. Kung ang isang elemento ay nakatakda sa isang posisyon ng absolute, ngunit wala itong walang katayuang nakaposisyon na mga ninuno, pagkatapos ay nakaposisyon na may kaugnayan sa elemento ng katawan, na siyang pinakamataas na elemento ng pahina. Ang kaparehong pagpoposisyon ay gumagamit ng parehong apat na mga katangian ng pagpoposisyon bilang lubos na pagpoposisyon, ngunit sa halip na basing ang posisyon ng elemento sa pinakamalapit na di-statically nakatuon na ninuno, nagsisimula ito mula sa kung saan ang elemento ay magiging kung ito ay nasa normal na daloy. Halimbawa, kung mayroon kang tatlong talata sa iyong webpage, at ang ikatlo ay may posisyon: kamag-anak style na nakalagay dito, ang posisyon nito ay nababalewala batay sa kasalukuyang lokasyon nito. Parapo 1. Parapo 2. Parapo 3. Sa halimbawa sa itaas, ang ikatlong talata ay nakaposisyon 2em mula sa kaliwang bahagi ng elemento ng lalagyan ngunit pa rin sa ibaba ng unang dalawang talata. Ito ay nananatili sa normal na daloy ng dokumento at ay bahagyang nababagay. Kung babaguhin mo ito sa posisyon: absolute, anuman ang sumusunod na ipinapakita nito sa ibabaw nito dahil hindi na ito sa normal na daloy ng dokumento. Ang mga elemento sa isang webpage ay kadalasang ginagamit upang magtakda ng isang halaga ng posisyon: kamag-anak na walang itinatag na halaga ng offset, na nangangahulugan na ang sangkap ay nananatiling eksakto kung saan ito lilitaw sa normal na daloy. Ginagawa lamang ito upang itatag ang elementong iyon bilang isang konteksto laban sa kung saan ang iba pang mga elemento ay maaaring nakaposisyon ganap. Halimbawa, kung mayroon kang isang dibisyon na nakapalibot sa iyong buong website na may halaga ng klase lalagyan, na kung saan ay isang pangkaraniwang sitwasyon sa web design, ang dibisyon ay maaaring itakda sa isang posisyon ng kamag-anak upang ang anumang bagay sa loob nito ay magagamit ito bilang isang konteksto sa pagpoposisyon. Ang napapanatiling pagpoposisyon ay tulad ng lubos na pagpoposisyon. Ang posisyon ng elemento ay kinakalkula sa parehong paraan tulad ng ganap na modelo, ngunit ang mga nakapirming elemento ay pagkatapos ay naayos sa lokasyon na iyon - halos tulad ng isang watermark. Ang lahat ng iba pa sa pahina ay pagkatapos ay mag-scroll sa nakalipas na sangkap. Upang magamit ang halaga ng property na ito, itinakda mo ang: posisyon: naayos;
Tandaan, kapag naayos mo ang isang elemento sa lugar sa iyong site, nag-print ito sa lugar na iyon kapag naka-print ang iyong webpage. Halimbawa, kung nakatakda ang iyong elemento sa tuktok ng iyong pahina, lilitaw ito sa tuktok ng bawat naka-print na pahina dahil nakatakda ito sa tuktok ng pahina. Maaari mong gamitin ang mga uri ng media upang baguhin kung paano nagpapakita ang mga naka-print na pahina ng mga nakapirming elemento: @media screen { h1 # unang {posisyon: fixed; } } @media print { h1 # unang {posisyon: static; } }
Kamag-anak na Positioning
Ano ang Tungkol sa Fixed Positioning?
