,

,

,

. Tag
medyo madalas na ginagamit sa layout ng mga modernong website upang lumikha ng mga grids at nangangahulugan lamang ng ilang uri ng bloke o lalagyan. Posible rin na mag-nest ng iba pang mga tag dito, na hindi posible sa lahat ng mga elemento ng block, kaya
maginhawang gamitin. Ang mga bloke ay karaniwang nakasalansan sa ibabaw ng bawat isa at hindi ipinapasok sa mga inline na elemento. Ang mga elemento ng HTML na inline ay teksto, at ginagamit ang CSS upang i-istilo ito.
Dahil sa lapad ng nilalaman, ang kabuuang lapad ng bloke ay ang kabuuan ng mga halaga ng kanan at kaliwang padding, margin, hangganan, at lapad. Sa isang ibinigay na taas - mula sa itaas at ibabang padding, mga margin, mga hangganan at taas. Ang teksto sa mga elemento ng block ay naiwang nakahanay bilang default. Kung ang isa sa mga ito ay naglalaman ng mga inline na elemento kasama ng mga elemento ng block, kung gayon ang isang hindi kilalang bloke ay nilikha sa paligid ng mga inline na elemento. Ang default na istilo ay ilalapat dito. Mamanahin din nito ang tinukoy na istilo na itinalaga sa magulang nito.
Daloy ng dokumento
Ang daloy ay tumutukoy sa pagkakasunud-sunod kung saan ipinapakita ang mga elemento ng page, na tinutukoy ng mga katangiang tinukoy sa CSS. Sa kasong ito, bilang default, ang mga bloke ay may linya mula sa itaas hanggang sa ibaba, at kung walang sapat na espasyo, ang mga inline na tag ay ililipat sa isang bagong linya at inaayos mula sa itaas hanggang sa ibaba at mula kaliwa hanggang kanan. Ang lokasyon ng isang elemento sa page ay depende sa lugar nito sa code: kung mas mataas ito, mas maaga itong matatagpuan. Ang bawat isa sa mga elemento ng bloke ay mukhang isang parihaba na nagtutulak palayo sa mga kapitbahay nito. Maaari mong baguhin ang gawi na ito gamit ang mga espesyal na katangian. Ang pag-align ng ilang mga bloke sa gitna o mga gilid ng isang lalagyan sa CSS ay tinatawag na pagpoposisyon.
Mga elemento ng pagpoposisyon
Maaaring kontrolin ang paglalagay ng mga bloke gamit ang absolute at relative positioning. Ang pagpoposisyon ay ginagamit upang bigyan ang malalaking seksyon ng isang pahina ng isang partikular na lokasyon, upang lumikha ng mga kumplikadong interface, mga pop-up, at mga elementong pampalamuti. Ang pangunahing katangian na ginagamit upang iposisyon ang mga bloke sa CSS ay posisyon. Mayroon itong apat na pangunahing katangian:
• kamag-anak;
• ganap;
• naayos;
• static.
Sa tulong nila, maaari kang lumipat ng mga mode ng layout sa pamamagitan ng pagtukoy sa isa sa apat na parameter: itaas, kanan, ibaba o kaliwa. Mayroon ding pag-aari para sa pag-order ng mga layer - z-index. Ang pagpoposisyon gamit ang static na ari-arian ay hindi karaniwang ginagamit dahil ito ay nagpapahiwatig ng default na pagpoposisyon ng mga bloke. Samakatuwid, ang paggamit ng anumang mga parameter ay hindi nakakaapekto sa anumang paraan. Ang iba pang tatlong mga katangian ay ginagamit para sa layout: kamag-anak, ganap, naayos.
Relative Positioning
Ang relatibong pagpoposisyon ng mga block sa CSS, ibig sabihin, ang posisyon: relative property, ay nangangahulugan na ang isang elemento ay maaaring ilipat at ang orihinal na posisyon nito ay mabago. Nananatili pa rin ang naturang bloke sa batis. Sa katunayan, hindi siya mismo ang lumikas, ngunit ang kanyang kopya. Ang mga halaga ng ari-arian ay nakatakda upang ipahiwatig nang eksakto kung gaano kalaki ang lilipat ng bloke sa isang direksyon o iba pa. Ang mga ito ay kadalasang sinusukat sa mga pixel. Ngunit ito ay katanggap-tanggap na gumamit ng iba pang mga yunit.

Paggamit ng Properties para sa Relative Positioning
Ang nangungunang property ay naglilipat ng kopya ng isang partikular na block pataas o pababa ayon sa bilang ng mga pixel na tinukoy sa property. Kapag ginagamit ito, ang mga elemento na matatagpuan sa ibaba o sa itaas ay nananatili sa kanilang mga lugar, dahil sa katunayan ang block na inililipat ay hindi rin gumagalaw kahit saan.
Ang pang-ibaba na ari-arian ay naglilipat ng bloke sa kabaligtaran ng direksyon patungo sa itaas na ari-arian. Ang isang positibong halaga ay nakakatulong sa pagtaas nito, at ang isang negatibong halaga ay nakakatulong na ilipat ito pababa. Ang kanan at kaliwang mga katangian ay naglilipat ng elemento sa kanan at kaliwa, ayon sa pagkakabanggit. Sa pamamagitan ng pagsasama-sama ng lahat ng ito, maaari mong itakda ang eksaktong lokasyon ng block sa pahina, inililipat ito sa mga vertical at horizontal coordinate axes. Kung dagdagan mo ang mga indent, kakalkulahin ang mga ito hindi mula sa gilid ng block mismo, ngunit mula sa kopya nito na offset sa gilid.

Ganap na pagpoposisyon
Ang ganap na pagpoposisyon ng mga bloke sa CSS ay tinukoy ng halaga ng katangian ng absolute position. Ang isang elemento na nakaposisyon ay ganap na nahuhulog sa daloy ng dokumento, at ang lugar nito ay kinuha ng mga kalapit na bloke. Ang lapad ng naturang elemento ay nakaunat depende sa nilalaman nito, at maaari itong ilipat sa pamamagitan ng pagtatakda ng ilang mga halaga para sa mga katangian sa itaas, kaliwa, kanan, ibaba. Ang ganap na pagpoposisyon ng mga bloke sa CSS ay kapaki-pakinabang para sa mga heading. Ngunit ang posisyon: ganap na gumagana hindi lamang para sa mga elemento ng block, kundi pati na rin para sa mga inline na elemento.
Pag-align ng mga elemento sa gitna
Ang isang nakaposisyon na ganap na inline na elemento ay gaganap na kapareho ng isang inline na elemento. Samakatuwid, ang pagpoposisyon ay maaari ding gamitin upang kontrolin ang teksto sa CSS. Maaari mong ilapat ang ilang mga bagong katangian dito, halimbawa, baguhin ang taas at lapad. Gumagamit ang pagsentro at patayong pagkakahanay sa CSS ng kumbinasyon ng ilang property. Kinokontrol ang vertical alignment ng nangungunang property. Kung gusto mong isentro ang isang bloke sa CSS, ang pangunahing lalagyan ay dapat na medyo nakaposisyon, at ang nakahanay na elemento ay dapat na ganap na nakaposisyon. Kailangang itakda ng container ang nangungunang property: 50%, at para ilipat ang elemento sa kalahati ng sarili nitong taas, gamitin ang translate property na may value na "0, -50%". Ang mga ganap na nakaposisyon na elemento ay maaaring makilala sa isang bagong uri, dahil ang mga katangian na hindi magagamit para sa iba pang mga uri ng pagpoposisyon ay inilalapat sa kanila.

Pagpoposisyon kaugnay sa kaliwang sulok sa itaas ng browser
Ang kaliwa, itaas, kanan, at ibabang mga katangian ay gumagana nang iba sa ganap at medyo nakaposisyon na mga elemento. Para sa mga kamag-anak na elemento, itinatakda ng mga katangiang ito ang offset na nauugnay sa kung saan matatagpuan ang elemento. Ang mga ganap na nakaposisyon ay sumasakop sa isang lugar na may kaugnayan sa isang partikular na coordinate system na nakatali sa laki ng window ng browser. Ang mga panimulang punto ng sistemang ito ay ang mga sulok ng bintana. Kapag ginagamit ang kaliwang property, bibilangin ang indent mula sa kaliwang bahagi ng browser, ngunit walang scrollbar. Ang nangungunang property, kapag ganap na nakaposisyon, ay tumutukoy sa offset mula sa itaas ng browser hanggang sa tuktok ng elemento kung saan ito inilapat. Sa pamamagitan ng pagsasama-sama ng parehong mga pag-aari, ang elemento ay maaaring ilipat sa kaliwang sulok sa itaas ng browser.

Pagpoposisyon na nauugnay sa kanang sulok sa itaas ng browser
Katulad nito, gamit ang kanan at nangungunang mga katangian, maaari mong pindutin ang isang elemento sa kanang bahagi ng window ng browser at baguhin ang patayong posisyon nito, ilipat ito sa kanang sulok sa itaas. Kung ang tamang property ay nakatakda sa isang negatibong halaga, ang block ay lilipat sa labas ng window border. Pagkatapos nito, dapat lumitaw ang isang scroll bar. Upang ilipat pababa ang isang elemento, gamitin ang property sa ibaba. Tinutukoy nito ang indent mula sa ibabang gilid ng browser window hanggang sa ibaba ng block. Kung negatibo ang halaga nito, lalabas din ang isang scroll bar, dahil ang elemento ay inilipat sa kabila ng ibabang hangganan ng window ng browser.
Coordinate system para sa ganap na pagpoposisyon
Bilang default, ang lahat ng elemento na binibigyan ng ganap na pagpoposisyon ay nakatali sa isang coordinate system - ang browser window. Ngunit maaari itong baguhin sa pamamagitan ng pagbibigay ng ilang elemento ng magulang na may kaugnayan sa pagpoposisyon. Pagkatapos ay babaguhin ng child block ang lokasyon nito depende sa magulang. Kung sa mga elemento ng magulang mayroong ilan na may kamag-anak na pagpoposisyon, kung gayon ang pagbibilang ay isinasagawa mula sa pinakamalapit sa kanila. Sa kasong ito, ang default na pagpoposisyon ay magmumula sa tinukoy sa body tag.

Reference point para sa isang ganap na nakaposisyon na elemento
Bago ang isang elemento ay binigyan ng ganap na pagpoposisyon, ito ay nasa isang lugar na tinatawag na isang implicit na pinagmulan. Kung ang naturang bloke ay hindi bibigyan ng mga pag-aari, hindi ito lilipat. Maaari mong ilipat ito sa pamamagitan ng pagtatakda ng margin property. Ito ay gagana nang katulad sa mga katangian ng pagpoposisyon. Kung hindi mo tutukuyin ang halaga ng kaliwang property at lahat ng iba pa, magiging katumbas ito ng auto. Maaari mo ring gamitin ang auto para ibalik ang mga elemento sa kanilang orihinal na lugar.

Nakapirming pagpoposisyon
Ang isa pang halaga ay naayos. Ang property ng posisyon ay nag-angkla ng isang elemento sa isang partikular na lokasyon. Ang nakapirming pagpoposisyon ay kadalasang ginagamit upang lumikha ng mga menu sa CSS. Ito ay katulad ng ganap, ngunit ang nakapirming bloke ay nahuhulog sa daloy. Kahit na kapag nag-i-scroll sa pahina, ang naturang elemento ay mananatili sa lugar, kaya ito ay maginhawa upang gamitin ito upang lumikha ng isang menu sa CSS. Ang panimulang punto ay iuugnay sa window ng browser. Kung mayroong ilang nakaposisyon na mga bloke, ang z-index na ari-arian ay ginagamit upang i-order ang mga ito. Sa tulong nito, maaari mong i-overlap ang mga kamag-anak na bloke sa mga absolute kung bibigyan mo sila ng kaukulang index, na ipinahayag bilang isang integer. Kung mas malaki ito, mas mataas ang bloke.
Sa mga araw na ito, ang mga web developer ay maaaring bumuo ng mga kumplikadong layout ng web page gamit ang iba't ibang mga diskarte sa CSS. Ang ilan sa mga diskarteng ito ay may mahabang kasaysayan (lumulutang), ang iba (flexbox) ay nakakuha ng katanyagan sa mga nakaraang taon.
Sa artikulong ito, susuriin natin nang mas malapitan ang ilang hindi kilalang bagay tungkol sa pagpoposisyon ng CSS.
Bago tayo magsimula, suriin natin sandali ang mga pangunahing kaalaman ng iba't ibang uri ng pagpoposisyon.
Pangkalahatang-ideya ng magagamit na mga paraan ng pagpoposisyon
Tinutukoy ng CSS position property ang uri ng pagpoposisyon ng isang elemento.
Mga Opsyon sa Pagpoposisyon
static ang default na value ng property sa pagpoposisyon. Pinapayuhan namin na ang elementong ito ay hindi gumagamit ng pagpoposisyon - ang pagpoposisyon ay inilalapat lamang kung tumukoy ka ng uri ng pagpoposisyon maliban sa default.
Upang gawin ito, kailangan mong itakda ang property ng posisyon sa isa sa mga sumusunod na value:
• kamag-anak
• ganap
• naayos
• malagkit
At pagkatapos lamang itakda ang pagpoposisyon, maaari mong gamitin ang mga katangian na na-offset ang elemento:
• tama
• ibaba
• Ang paunang halaga ng mga katangiang ito ay ang auto keyword.
Dapat itong isaalang-alang na kung ang isang elemento ay may katangian ng posisyon na nakatakda sa absolute o fixed , kung gayon ito ay isang ganap na nakaposisyon na elemento. Gayundin, ang pag-aari ng z-index ay nagsisimulang gumana para sa mga nakaposisyon na elemento, na tumutukoy sa pagkakasunud-sunod ng stacking.
Mga pagkakaiba sa pagitan ng mga pangunahing paraan ng pagpoposisyon
Ngayon ay mabilis nating tingnan ang tatlong pangunahing pagkakaiba sa pagitan ng mga available na uri ng pagpoposisyon:
• ganap na (ganap) nakaposisyon elemento ay ganap na inalis mula sa stream, ang kanilang lugar ay kinuha sa pamamagitan ng kanilang pinakamalapit na kapitbahay.
• medyo nakaposisyon (kamag-anak) at nakadikit (malagkit) panatilihin ang kanilang lugar sa daloy at ang kanilang mga pinakamalapit na kapitbahay ay hindi sumasakop dito. Gayunpaman, ang padding ng mga elementong ito ay hindi kumukuha ng espasyo, ngunit ganap na binabalewala ng ibang mga elemento at ito ay maaaring magresulta sa magkakapatong na mga elemento.
• ang mga nakapirming elemento (at ang nakapirming pagpoposisyon ay isang uri ng absolute) ay palaging nakaposisyon na may kaugnayan sa lugar ng pagpapakita (hindi pinapansin ang pagkakaroon ng pagpoposisyon sa mga ninuno), habang ang mga malagkit na elemento ay nakaposisyon na nauugnay sa pinakamalapit na ninuno na may pag-scroll (overflow: auto). At tanging sa kawalan ng gayong mga ninuno ay nakaposisyon sila na may kaugnayan sa visibility zone.
Makikita mo ito nang mas detalyado sa demo:
Tandaan: Ang sticky positioning ay isa pa ring teknolohiyang pang-eksperimentong may limitadong suporta sa mga browser. Siyempre, kung gusto mo, maaari kang gumamit ng polyfill upang idagdag ang functionality na ito sa browser, ngunit dahil sa mababang prevalence nito, hindi tatalakayin ang property na ito sa artikulo.
Mga elemento ng pagpoposisyon na may ganap na uri ng pagpoposisyon
Sigurado akong alam ng karamihan sa mga tao kung paano gumagana ang ganap na pagpoposisyon. Gayunpaman, maraming bagay tungkol dito ang maaaring makalito sa mga nagsisimula.
Samakatuwid, nagpasya akong magsimula dito kapag naglalarawan ng hindi kilalang mga tampok ng pagpoposisyon.
Kaya, ang isang ganap na nakaposisyon na elemento ay na-offset na may kaugnayan sa pinakamalapit nitong nakaposisyon na ninuno. Siyempre, ito ay gumagana kung ang alinman sa mga ninuno ay may posisyon maliban sa static - kung ang elemento ay walang nakaposisyon na mga ninuno, ito ay na-offset na may kaugnayan sa visibility area.
Ito ay ipinapakita ng sumusunod na halimbawa:
Sa demo na ito, ang berdeng bloke sa una ay ganap na nakaposisyon nang walang padding ibaba:0 at kaliwa:0 , ang ninuno nito (ang pulang bloke) ay hindi nakaposisyon sa lahat.
Gayunpaman, medyo naiposisyon namin ang panlabas na pambalot (isang elemento na may class na jumbotron). Pansinin kung paano nagbabago ang pagpoposisyon ng berdeng bloke kapag nagbabago ang uri ng pagpoposisyon ng mga ninuno nito.
Hindi pinapansin ng mga elementong ganap na nakaposisyon ang float property
Kung ilalapat namin ang ganap o nakapirming pagpoposisyon sa isang floated na elemento, ang float property ay itatakda sa wala . Sa kabilang banda, kung itatakda natin ang kamag-anak na pagpoposisyon, ang elemento ay mananatiling lumulutang.
Tingnan ang kaukulang demo:
Sa halimbawang ito, tinukoy namin ang dalawang magkaibang elemento na lumulutang sa kanan. Tandaan na kapag ang isang pulang bloke ay naging ganap na nakaposisyon, binabalewala nito ang halaga ng float property, habang ang isang medyo nakaposisyon na berdeng bloke ay nagpapanatili ng float value.
Ang mga ganap na nakaposisyon na inline na elemento ay nagiging mga elemento ng bloke
Ang isang inline na elemento na may ganap o nakapirming pagpoposisyon ay tumatagal sa mga katangian ng isang bloke na elemento. Ang conversion ng mga inline na elemento upang harangan ang mga elemento ay inilalarawan nang mas detalyado sa talahanayan.
Sa kasong ito, lumikha kami ng dalawang magkaibang elemento. Ang una (berdeng bloke) ay isang elemento ng bloke, at ang pangalawa (pulang bloke) ay isang inline na elemento. Sa una, ang berdeng bloke lamang ang nakikita.
Hindi nakikita ang pulang kahon dahil gumagana lang ang mga katangian ng lapad at taas nito sa mga elemento ng block at inline-block, at dahil wala itong content, wala itong anumang dimensyon.
Kapag nagtalaga ka ng ganap o nakapirming posisyon sa isang pulang bloke, ito ay magiging isang bloke ng bloke at ang mga sukat ng bloke na tinukoy dito ay magkakabisa.
Ang mga elementong ganap na nakaposisyon ay walang padding collapse
Bilang default, kapag nagdikit ang dalawang vertical na margin, pinagsama ang mga ito sa isang katumbas ng maximum ng mga ito. Ito ay tinatawag na margin collapse.
Ang pag-uugali ng ganap na nakaposisyon na mga elemento dito ay katulad ng mga lumulutang na elemento - ang kanilang padding ay hindi pinagsama sa mga kapitbahay nito.
Sa demo na ito, binibigyan ang elemento ng padding na 20 pixels. Ang padding nito ay bumagsak sa padding ng parent element, na 20 pixels din. Tulad ng nakikita mo, tanging sa ganap na pagpoposisyon ay walang pagbagsak.
Ngunit paano natin mapipigilan ang pagbagsak ng mga margin? Kailangan nating maglagay ng ilang uri ng separator sa pagitan nila.
Maaari itong maging padding o border, at maaaring ilapat sa parehong mga elemento ng magulang at anak. Ang isa pang opsyon ay magdagdag ng clearfix sa parent element.
Mga elemento ng pagpoposisyon na may mga pixel at porsyento
Nakagamit ka na ba ng mga porsyento sa halip na mga pixel upang iposisyon ang mga elemento? Kung oo ang sagot, alam mo na ang offset ng isang elemento ay nakasalalay sa mga napiling unit (mga pixel o porsyento).
Medyo nakakalito, di ba? Kaya tingnan muna natin kung ano ang sinasabi ng detalye tungkol sa porsyento ng offset:
Offset bilang porsyento ng lapad (para sa kaliwa at kanan) o taas (itaas o ibaba) ng parent block. Para sa mga nakadikit na elemento, ang offset ay kinakalkula bilang isang porsyento ng lapad (para sa kaliwa at kanan) o taas (itaas o ibaba) ng daloy. Ang mga negatibong halaga ay katanggap-tanggap.
Tulad ng nabanggit, kapag itinakda mo ang offset bilang isang porsyento, ang posisyon ng elemento ay nakasalalay sa lapad at taas ng magulang nito.
Ipinapakita ng demo ang pagkakaibang ito:
Ang halimbawang ito ay gumagamit ng mga pixel at porsyento para sa offset. Siyempre, kapag tinukoy mo ang isang offset sa mga pixel, ang elemento ay ililipat kung saan ito kinakailangan.
At kung pipiliin natin ang isang porsyento para sa offset, ang resulta ay depende sa laki ng parent na elemento. Narito ang isang visualization na nagpapakita kung paano kinakalkula ang bagong posisyon:
Tandaan: Tulad ng malamang na alam mo, pinapayagan ka ng transform property (kasama ang iba't ibang function ng pagsasalin) na baguhin ang posisyon ng isang elemento. Ngunit sa kasong ito, kapag gumagamit ng mga porsyento, ang pagkalkula ay ibabatay sa laki ng elemento mismo, at hindi sa magulang nito.
Konklusyon
Umaasa ako na ang artikulong ito ay nakatulong sa iyo na mas maunawaan ang pagpoposisyon sa CSS at nilinaw ang ilan sa mga hamon.
Kapag nagpoposisyon ng isang block relative, kailangan mong itakda ang property posisyon:kamag-anak at mga katangian ng displacement. Ang displacement sa kasong ito ay magaganap hindi nauugnay sa "magulang" na elemento (tulad ng ganap na pagpoposisyon), ngunit nauugnay sa block mismo sa normal na daloy. Ito ay magiging mas malinaw sa isang halimbawa. Sabihin nating mayroon tayong HTML page na may tatlong div:
Relative Positioning
Itakda natin ang mga sukat at hangganan ng mga bloke na ito sa style sheet:
#blok1, #blok2, #blok3 ( border:1px solid red; width:150px; height:50px; )
Ngayon ang aming pahina sa browser ay ganito ang hitsura:
Ngayon, baguhin natin ang posisyon ng pangalawang bloke sa pamamagitan ng pagdaragdag ng panuntunan sa pahina ng istilo:
#blok1, #blok2, #blok3 ( border:1px solid red; width:150px; height:50px; ) #blok2( position:relative; left:50px; top:25px; )
Ngayon ang aming pahina ay ganito ang hitsura:

Ang aming pangalawang bloke ay lumipat pababa at sa kanan na nauugnay sa kung saan ito ay nasa normal na daloy. Ang natitirang mga bloke ay nanatili sa kanilang mga lugar. Sa pagsasagawa, ang pagpoposisyon ng kamag-anak ay bihirang ginagamit, kaya hindi na namin ito bibigyan ng pansin at isasaalang-alang ang mga lumulutang na bloke.
Mga lumulutang na bloke
Ang mga bloke na ito ay hindi maaaring iposisyon nang may katumpakan ng pixel, tulad ng sa mga nakaraang scheme, ngunit ang scheme ng pagpoposisyon na ito ay napakakaraniwan. Bihirang mabuhay ang isang website nang walang mga lumulutang na bloke, at ganap na imposibleng gumawa ng "likido" na layout ng website nang wala ang mga ito.
Ang ganitong mga bloke ay maaaring malayang gumagalaw sa paligid ng pahina ng mga imahe sa HTML na kumikilos sa katulad na paraan, na nakahanay gamit ang parameter ihanay.
Ang mga lumulutang na bloke ay tinutukoy ng ari-arian lumutang, na tumutukoy kung ang bloke ay lumulutang at kung saang direksyon ito lilipat. Mayroong tatlong mga pagpipilian:
• umalis- ang bloke ay pinindot sa kaliwang gilid, ang natitirang mga elemento ay dumadaloy sa paligid nito sa kanang bahagi.


• tama- ang bloke ay pinindot sa kanang gilid, ang natitirang mga elemento ay dumadaloy sa paligid nito sa kaliwang bahagi.


• wala- ang bloke ay hindi gumagalaw at nakaposisyon ayon sa ari-arian posisyon.
Tingnan natin ang isang halimbawa. Sabihin nating mayroon tayong HTML page na may sumusunod na code:
I-block ang pagpoposisyon
Block 1 text
At isang page ng style.css na may sumusunod na code:
#blok1( border:1px solid na pula; lapad:150px; taas:50px; )
Ngayon ang aming pahina sa browser ay ganito ang hitsura:
Gawin nating lumutang ang ating bloke at itulak ito sa kaliwang gilid:
#blok1( border:1px solid red; width:150px; height:50px; float:left; )
Ngayon itulak natin ang bloke sa kanang gilid:
#blok1( border:1px solid red; width:150px; height:50px; float:right; )
Ngayon ang aming pahina sa browser ay ganito ang hitsura:
Ano ang mangyayari kung mayroong ilang mga lumulutang na bloke sa pahina? Magdagdag tayo ng isa pang bloke sa aming html page:
I-block ang pagpoposisyon
Block 1 text
I-block ang text 2
Ilang elemento lang sa page. Maaari itong maging teksto lamang, mga link, mga listahan, mga larawan, atbp.
At bigyan sila ng iba't ibang halaga ng ari-arian lumutang:
#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )
Ngayon ang aming pahina sa browser ay ganito ang hitsura:
Paano kung pareho sila ng mga halaga? Halimbawa:
#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:left; )
Pagkatapos ay pinindot ang pangalawang bloke sa kanang gilid ng unang bloke:
Magiging katulad ang sitwasyon para sa parehong mga halaga tama:
#blok1( border:1px solid red; width:150px; height:50px; float:right; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )
Pakitandaan: ang unang bloke 1 ay pipindutin sa kanang gilid, at pagkatapos ay ang bloke 2 ay pipindutin dito.
Ngunit paano kung gusto nating pinindot ang mga bloke sa kanang gilid, ngunit matatagpuan ang isa sa ibaba ng isa. May ari-arian para dito malinaw, na tumutukoy kung aling mga gilid ng isang lumulutang na bloke ang hindi maaaring katabi ng iba pang mga lumulutang na bloke. Maaaring magkaroon ng isa sa apat na value ang property na ito:
• umalis- ang bloke ay dapat na matatagpuan sa ibaba ng lahat ng kaliwang bahagi na mga bloke.


• tama- ang bloke ay dapat na matatagpuan sa ibaba ng lahat ng kanang bahagi na mga bloke.


• pareho- ang bloke ay dapat na matatagpuan sa ibaba ng lahat ng mga lumulutang na bloke.


• wala- walang mga paghihigpit, ito ang default na halaga.


Itakda natin ang property na ito para sa pangalawang bloke sa aming huling halimbawa:
#blok1( border:1px solid red; width:150px; height:50px; float:right; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; clear:right; )
Ngayon ay lumabas ito sa paraang gusto ko: isang bloke sa ilalim ng isa pa:

Sa nakaraang aralin, gumawa kami ng pahinang tulad nito gamit ang ganap na pagpoposisyon:

Tingnan natin kung paano ito magagawa gamit ang mga lumulutang na bloke. Kaya, ang code para sa mismong pahina ay ang mga sumusunod:
I-block ang pagpoposisyon
header ng site
Nilalaman
block ng balita
ibaba ng site
Sa page ng style.css, itakda muna natin ang mga sukat at background para sa ating mga bloke:
#header( background:darkred; width:715px; height:100px; ) #menu(background:oldlace; width:190px; height:300px; ) #content(background:oldlace; width:525px; height:300px; ) #footer ( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px; )
Ngayon ang aming mga bloke ay matatagpuan sa isang normal na daloy, i.e. isa sa ilalim ng isa. Kailangan nating gumawa ng mga bloke menu At nilalaman lumulutang at kaliwete. Isang bloke balita dapat pindutin laban sa kanang gilid, i.e. Gagawin namin itong isang kanang kamay na lumulutang na bloke:
#header( background:darkred; width:715px; height:100px; ) #menu(background:oldlace; width:190px; height:300px; float:left; ) #content(background:oldlace; width:525px; height:300px ; float:left; ) #footer(background:darkred; width:715px; height:30px; ) #news(background:yellow; width:150px; height:280px; float:right; )
Ang aming pahina sa browser ay ganito ang hitsura:

Tingnan natin ang aming news block, makikita mo na ito ay matatagpuan sa ibaba ng teksto sa block nilalaman. Ngunit gusto naming ang news block ay nasa kanan, at ang text ay dadaloy sa paligid nito sa kaliwa.
Bakit hindi ito gumana sa amin? Dahil ang block namin balita sa html code ay matatagpuan sa ibaba ng teksto at tanging ang teksto na matatagpuan sa ibaba nito ang dadaloy sa paligid nito. Upang ayusin ito kailangan naming ilagay ang aming div="balita" sa itaas ng teksto (i.e. bago ang salitang "nilalaman"):
I-block ang pagpoposisyon
header ng site
block ng balita
Nilalaman
ibaba ng site
Ngayon ang aming block ng balita ay nasa lugar nito:

At upang hindi ito pindutin nang malapit sa tuktok at kanang mga gilid, magdaragdag kami ng isang halaga ng margin para sa bloke na ito:
#news( background:yellow; width:150px; height:280px; float:right; margin:10px; )
Ngayon ay nakamit namin ang parehong resulta tulad ng sa ganap na pagpoposisyon.

Sumang-ayon na ang paggamit ng mga lumulutang na bloke ay mas madaling maglatag ng isang pahina: hindi mo kailangang magbilang ng mga pixel, at ang code ay mas maikli. Bilang karagdagan, sa isang "likido" na layout, hindi namin matukoy ang eksaktong lokasyon ng bloke sa screen, at sa tulong ng mga lumulutang na bloke hindi namin ito kailangan, sapat na upang ipahiwatig lamang ang isang palatandaan (sa kaliwa, sa kanan, sa ibaba o sa parehong linya).
Nakapirming mga bloke
Tulad ng naaalala mo, na may nakapirming pagpoposisyon, ang bloke ay naayos na may kaugnayan sa lugar ng pagtingin. Sa ilang mga paraan, ang mga nakapirming bloke ay katulad ng mga frame. Available lang ang pag-scroll sa loob ng isang frame, ngunit hindi sa loob ng isang bloke.
Ang mga nakapirming bloke ay may isang makabuluhang disbentaha: hindi sila sinusuportahan ng mga browser ng Internet Explorer. Samakatuwid, hindi sila dapat gamitin sa ngayon. Samakatuwid, dito ay ipahiwatig lamang namin ang syntax ng naturang panuntunan, kung nais mong subukan ito sa iyong sarili (halimbawa, sa browser ng Opera).
#blok( position:fixed; left:0px; top:0px; )
Ang block na may pantukoy na "blok" ay mananatili sa lugar kapag nag-scroll sa pahina.
Iyon lang para sa araw na ito. Sa susunod na aralin ay makikilala natin ang ilan pang mga katangian ng mga bloke at ang kanilang mga uri.
Ang block element sa HTML ay isang elemento na, bilang default, ay sumasakop sa buong lapad ng parent element nito. Ang parent element ay maaaring isa pang block element, o browser window. Maaari mong itakda ang lapad at taas ng elemento ng block gamit ang mga katangian ng CSS. Ang pagpoposisyon ng mga elemento ng block ay ang proseso ng pagpoposisyon sa kanila sa loob ng browser window at kaugnay sa kanila gamit ang CSS properties position, kaliwa, itaas, kanan at ibaba. Ang CSS position property ay idinisenyo upang magtakda ng isa sa apat na available na uri ng pagpoposisyon: static (default), absolute, fixed at relative. Ang natitirang mga katangian ng CSS, katulad ng kaliwa , itaas , kanan at ibaba , ay ginagamit upang magtakda ng mga distansya na nauugnay sa kaliwa, itaas, kanan at ibabang mga gilid ng parent na elemento. Gayundin, kapag nagtatakda ng ilang partikular na katangian, maaaring mag-overlap ang mga elemento ng block sa isa't isa, at magagamit din ang feature na ito sa mga website.
Default na pagpoposisyon (static)
Kung hindi ka tumukoy ng posisyon para sa isang block element o tinukoy na static , na parehong bagay, ang mga elemento ng block ay nakaayos sa pagkakasunud-sunod. Bukod dito, ang susunod na bloke (halimbawa: pula) ay matatagpuan sa isang bagong linya. Gayundin, ang pagpoposisyon na ito ay hindi apektado sa pamamagitan ng pagtatakda ng mga distansya sa kaliwa, itaas, kanan at ibaba.



Ganap na pagpoposisyon (absolute)
Sa ganap na pagpoposisyon, ang posisyon ng isang elemento ay tinutukoy na may kaugnayan sa mga gilid ng window ng browser gamit ang mga distansyang tinukoy ng kaliwa , itaas , kanan , at ibabang katangian. Kung tinukoy mo ang mga distansya sa kaliwa at kanan sa parehong oras, at magkasalungat ang mga ito sa isa't isa, pagkatapos ay ibibigay ang kagustuhan sa kaliwa , ganoon din ang para sa itaas at ibaba , kung saan ang distansya sa itaas ay mauuna. Ang ganap na pagpoposisyon ay madalas na ginagamit kasabay ng kamag-anak na pagpoposisyon para sa mga layunin ng disenyo, kapag kinakailangan upang maglagay ng iba't ibang elemento na nauugnay sa bawat isa, maaari rin itong magamit upang lumikha ng mga drop-down na menu, layout ng site, atbp.




Nakapirming pagpoposisyon
Ang nakapirming pagpoposisyon ay iba sa iba pang mga uri ng pagpoposisyon at hindi gumagalaw kasama ng nilalaman habang nag-i-scroll ka sa pahina. Naka-angkla ang mga elemento ng block na nakapirming posisyon gamit ang kaliwa , itaas , kanan , at ibabang mga katangian sa mga gilid ng window ng browser. Ang nakapirming pagpoposisyon ay ginagamit upang lumikha ng mga interface ng frame (ang window ng browser ay nahahati sa ilang mga lugar), isang nakapirming menu, isang nakapirming footer ng site at "permanenteng" mga bloke (listahan ng mga link, mga social button, atbp.).




Relatibong pagpoposisyon
Tinutukoy ang kaugnay na pagpoposisyon sa pamamagitan ng pagtukoy sa mga distansya sa kaliwa , itaas , kanan , at ibaba na nauugnay sa kasalukuyang posisyon nito.




Gayunpaman, ang posisyon ng block na ito ay maaari ding gawin gamit ang margin property.



Ang kaugnay na pagpoposisyon ay hindi nakakatuwang gamitin nang mag-isa, kadalasang ginagamit ito kasabay ng ganap na pagpoposisyon.
Isaalang-alang natin ang mga pagpipilian:


Gumagana ang mga ito sa lahat ng nakaposisyong elemento maliban sa mga static.
Halimbawa ng pagpoposisyon.
Maaaring mag-overlap ang mga elemento sa isa't isa!
Ipinapakita ang isang elemento sa itaas ng iba pa!
Ang property ng posisyon ay may 4 na value: static, fixed, relative at absolute. Ang bawat isa sa mga kahulugang ito ay ipapakita sa ibaba na may isang halimbawa ng paggamit.
Bago natin suriin nang detalyado ang lahat ng uri ng pagpoposisyon ng mga elemento sa isang pahina, kailangan nating isaalang-alang kung ano ang daloy ng dokumento.
Daloy ng dokumento
Bilang default, ang mga elemento sa isang web page ay ipinapakita sa pagkakasunud-sunod kung saan lumitaw ang mga ito sa HTML na dokumento, iyon ay, ang mga elemento ng block ay sumasakop sa buong lapad na magagamit sa kanila at nakasalansan nang patayo sa ibaba ng isa. Ang mga inline na elemento ay naka-line up nang pahalang hanggang sa ang buong magagamit na lapad ay okupado, pagkatapos ang buong lapad ay okupado, isang line break ay ginawa at ang lahat ay magsisimula muli. Ang ganitong pagkakaayos ng mga elemento ay tinatawag normal na daloy(tinatawag din daloy ng dokumento o pangkalahatang daloy).
Maaari mong gamitin ang float o position property para alisin ang isang elemento sa normal na daloy. Kung ang isang elemento ay "bumagsak" sa normal na daloy, ang mga elemento na matatagpuan sa code sa ibaba ng elementong iyon ay ililipat sa lugar nito sa web page.
Static na pagpoposisyon
Ang static ay ang default na pagpoposisyon para sa lahat ng elemento sa isang web page. Kung hindi mo ilalapat ang property ng posisyon sa isang elemento, ito ay magiging static at lalabas sa web page ayon sa pangkalahatang daloy ng mga elemento.
Kapag inilapat ang mga katangian ng CSS sa itaas, kaliwa, kanan o ibaba sa isang elementong nakaposisyon nang statically, hindi sila papansinin.
Kung kinakailangan, maaari kang magtakda ng static na pagpoposisyon sa style sheet gamit ang static na halaga:
Unang talata.
Pangalawang talata.


Subukan »
Nakapirming pagpoposisyon
Ang mga elemento na may nakapirming pagpoposisyon ay matatagpuan sa pahina na nauugnay sa window ng browser. Ang mga nasabing elemento ay aalisin sa pangkalahatang daloy;
Ito ay nagkakahalaga ng pagbibigay pansin sa katotohanan na ang mga elemento na may nakapirming pagpoposisyon ay maaaring mag-overlap sa iba pang mga elemento, itago ang mga ito nang buo o bahagyang. Kapag nag-i-scroll sa mahabang pahina, lumilikha sila ng epekto ng hindi gumagalaw na mga bagay na natitira sa parehong lugar:

Text Text Text Text Text Text Text Text Ilang text Text Text Text Text Text Text


Subukan »
Relative Positioning
Ang mga elementong medyo nakaposisyon, tulad ng mga static na elemento, ay nananatili sa pangkalahatang daloy. Kapag inilapat mo ang mga katangian sa itaas, kaliwa, kanan, o ibaba sa mga elementong medyo nakaposisyon, lilipat ang mga ito ayon sa kanilang lokasyon, na mag-iiwan ng walang laman na espasyo kung saan orihinal na matatagpuan ang elemento.
Ang mga nasabing elemento ay hindi nakakaapekto sa posisyon ng mga elemento na nakapalibot sa kanila;
Pamagat ng unang antas.
Pamagat na medyo nakaposisyon.
Pangatlong antas ng heading.


Subukan »
Tandaan: Ang mga elementong may kaugnay na pagpoposisyon (kamag-anak) ay karaniwang ginagamit bilang isang magulang para sa mga elementong may ganap na pagpoposisyon (ganap).
Ganap na pagpoposisyon
Ang mga ganap na nakaposisyon na elemento ay ganap na inalis mula sa pangkalahatang daloy, ang natitirang mga elemento ay kukuha ng libreng espasyo, ganap na binabalewala ang ganap na nakaposisyon na mga elemento. Pagkatapos ay maaari mong iposisyon ang elemento saanman mo gusto sa web page gamit ang mga katangian sa itaas, kaliwa, kanan, o ibaba.
Ang lahat ng ganap na nakaposisyon na mga elemento ay nakaposisyon na may kaugnayan sa window ng browser o nauugnay sa pinakamalapit na nakaposisyon na ninuno (kung mayroon man) na may katangian ng posisyon na absolute , fixed , o relative .

Baguhin natin ang lokasyon ng logo gamit ang ganap na pagpoposisyon.
Ang logo ay matatagpuan na ngayon sa kanang sulok sa itaas ng pahina.


Subukan »
Nagpapatong na mga elemento
Kapag ang mga elemento ay nasa labas ng pangkalahatang daloy ng pahina, maaari silang mag-overlap sa isa't isa. Karaniwan, ang pagkakasunud-sunod ng mga elemento ay tumutugma sa kanilang pagkakasunud-sunod sa HTML code ng pahina, gayunpaman, posible na kontrolin ang pagkakasunud-sunod ng overlap gamit ang CSS property z-index , mas mataas ang halaga nito, mas mataas ang elemento.
z-index: 1;
z-index: 0;
z-index: 2;