Ang Positioning ng CSS ay Higit sa Mga X, Y Coordinate
Ang pagpoposisyon ng CSS ay matagal nang naging mahalagang bahagi ng paglikha ng mga layout ng website. Kahit na may pagtaas ng mga mas bagong diskarte sa layout ng CSS tulad ng Flexbox at CSS Grid, ang pagpoposisyon ay mayroon ding 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 magtatag ng property ng CSS para sa posisyon upang sabihin sa browser kung gagamit ka ng absolute o relative positioning para sa isang naibigay na elemento. Kailangan mo ring malinaw na 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 ang default na posisyon para sa anumang elemento sa isang web page. Kung hindi mo tukuyin ang posisyon ng isang elemento, ito ay magiging static. Nangangahulugan ito na ipapakita ito sa screen batay sa kung saan ito ay nasa HTML na dokumento at kung paano ito ipapakita sa loob ng normal na daloy ng dokumentong iyon.
Kung ilalapat mo ang mga panuntunan sa pagpoposisyon tulad ng tuktok o kaliwa sa isang elemento na may static na posisyon, ang mga panuntunang ito ay hindi papansinin at ang elemento ay mananatili kung saan lumilitaw ito sa normal na daloy ng dokumento. Sa katunayan, bihira mo, kung mayroon man, kailangan mong itakda ang isang elemento sa isang static na posisyon sa CSS dahil iyon 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 kinalkula batay sa pinakamalapit na di-static na nakaposisyon na ninuno ng elementong iyon.
Dahil ang isang ganap na naka-posisyon na sangkap ay kinuha sa labas ng normal na daloy ng dokumento, hindi ito makakaapekto kung paano ang mga elemento bago ito o pagkatapos nito sa HTML ay nakaposisyon sa web page.
Bilang isang halimbawa - kung mayroon kang isang dibisyon na nakaposisyon gamit ang isang halaga ng kamag-anak (titingnan namin ang halaga na ito sa ilang sandali), at sa loob ng dibisyong iyon nagkaroon ka ng isang talata na nais mong i-posisyon ang 50 pixel mula sa tuktok ng dibisyon, ay magdaragdag ng isang halaga ng posisyon ng "absolute" sa talata na iyon kasama ang isang balanseng halaga ng 50px sa "top" na ari-arian, tulad nito.
posisyon: absolute; itaas: 50px;Ang ganap na nakaposisyon sangkap na ito ay laging magpapakita ng 50 pixels mula sa tuktok ng medyo nakaposisyon dibisyon - kahit na ano pa ang ipinapakita doon sa normal na daloy. Ang iyong "walang pasubali" na nakaposisyon elemento ay gumagamit ng relatibong nakaposisyon isa bilang konteksto nito at ang positing halaga na ginagamit mo ay kamag-anak na iyon.
Ang apat na katangian ng pagpoposisyon na magagamit mo ay ang mga:
- itaas
- tama
- ibaba
- kaliwa
Maaari mong gamitin ang alinman sa tuktok o ibaba (dahil ang isang elemento ay hindi maaaring nakaposisyon ayon sa parehong mga halagang ito) at alinman sa kanan o kaliwa.
Kung ang isang elemento ay naka-set sa isang posisyon ng absolute, ngunit doon ay walang mga walang-static na nakaposisyon ninuno, pagkatapos ito ay nakaposisyon na may kaugnayan sa elemento ng katawan, na kung saan ay ang pinakamataas na elemento ng antas ng pahina.
Kamag-anak na Positioning
Nabanggit na namin ang kamag-anak na pagpoposisyon, kaya tingnan natin ang property na iyon ngayon.
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-staticly nakaposisyon 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 web page, at ang ikatlo ay may isang "posisyon: kamag-anak" na estilo na nakalagay dito, ang posisyon ay maa-offset batay sa kasalukuyang lokasyon.
Talata 1.
Talata 2.
Talata 3.
Sa halimbawa sa itaas, ang ikatlong talata ay nakaposisyon 2em mula sa kaliwang bahagi ng elemento ng lalagyan, ngunit mananatili pa rin sa ibaba ang unang dalawang talata. Ito ay mananatili sa normal na daloy ng dokumento, at mag-offset nang bahagya. Kung binago mo ito sa posisyon: absolute; anumang bagay na susundan nito ay ipapakita sa ibabaw nito, sapagkat hindi na ito magiging sa normal na daloy ng dokumento.
Ang mga elemento sa isang web page ay kadalasang ginagamit upang magtakda ng isang halaga ng posisyon: kamag-anak na walang itinakdang halaga na itinatag, na nangangahulugan na ang elemento 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 isang halaga ng klase ng "lalagyan" (na isang pangkaraniwang sitwasyon sa disenyo ng web), 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.
Ano ang Tungkol sa Fixed Positioning?
Ang napapanatiling pagpoposisyon ay tulad ng lubos na pagpoposisyon. Ang posisyon ng elemento ay kinakalkula sa parehong paraan tulad ng ganap na modelo, ngunit nakatakda ang mga nakapirming elemento sa lugar na iyon - halos tulad ng watermark . Ang lahat ng iba pa sa pahina ay pagkatapos ay mag-scroll sa nakaraang sangkap na iyon.
Upang gamitin ang halaga ng property na ito, itatakda mo ang:
posisyon: naayos;Tandaan, kapag naayos mo ang isang elemento sa lugar sa iyong site, i-print ito sa lokasyong iyon kapag naka-print ang iyong pahina ng Web. Halimbawa, kung nakatakda ang iyong elemento sa tuktok ng iyong pahina, lilitaw ito sa tuktok ng bawat naka-print na pahina - dahil nakaayos 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 # first {position: static; }}Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard sa 1/7/16.