Huling na-update: 04/28/2016

Nagbibigay ang CSS ng mga kakayahan sa pagpoposisyon ng elemento, ibig sabihin ay maaari tayong maglagay ng elemento sa isang partikular na lokasyon sa page.

Ang pangunahing property na kumokontrol sa pagpoposisyon sa CSS ay ang position property. Maaaring kunin ng property na ito ang isa sa mga sumusunod na value:

static : karaniwang pagpoposisyon ng elemento, default na halaga

absolute : ang elemento ay nakaposisyon na may kaugnayan sa mga hangganan ng elemento ng lalagyan kung ang katangian ng posisyon nito ay hindi static

relative : Ang elemento ay nakaposisyon na may kaugnayan sa default na posisyon nito. Karaniwan, ang pangunahing layunin ng kamag-anak na pagpoposisyon ay hindi upang ilipat ang isang elemento, ngunit upang magtatag ng isang bagong anchor point para sa ganap na pagpoposisyon ng mga nested na elemento nito.

fixed : ang elemento ay nakaposisyon na may kaugnayan sa browser window, ito ay nagbibigay-daan sa iyo upang lumikha ng mga nakapirming elemento na hindi nagbabago ng posisyon kapag nag-scroll

Hindi mo dapat sabay na ilapat ang float property at anumang uri ng pagpoposisyon maliban sa static (iyon ay, ang default na uri) sa isang elemento.

Ganap na pagpoposisyon

Ang lugar ng pagtingin sa browser ay may tuktok, ibaba, kanan, at kaliwang gilid. Ang bawat isa sa apat na gilid na ito ay may katumbas na CSS property: kaliwa, kanan, itaas, at ibaba. Ang mga halaga para sa mga katangiang ito ay tinukoy sa mga pixel, ems, o mga porsyento. Hindi kinakailangang magtakda ng mga halaga para sa lahat ng apat na panig. Bilang isang patakaran, dalawang halaga lamang ang nakatakda - ang indent mula sa tuktok na gilid sa itaas at ang indent mula sa kaliwang gilid sa kaliwa.

HELLO MUNDO

Dito ang absolute positioned div ay magiging 100 pixels sa kaliwa ng viewport border at 50 pixels mula sa ibaba.

Hindi napakahalaga na pagkatapos ng elementong div na ito ay may ilang iba pang mga elemento. Ang div block na ito ay sa anumang kaso ay ipoposisyon kaugnay sa mga hangganan ng viewport ng browser.

Kung ang isang elemento na may ganap na pagpoposisyon ay matatagpuan sa isa pang lalagyan, na, naman, ay may isang halaga ng pag-aari ng posisyon na hindi katumbas ng static , kung gayon ang elemento ay nakaposisyon kaugnay sa mga hangganan ng lalagyan:

Relatibong pagpoposisyon

Tinukoy din ang relative positioning gamit ang relative value. Upang tukuyin ang partikular na posisyon kung saan inililipat ang elemento, ginagamit ang parehong itaas, kaliwa, kanan, ibabang mga katangian:

ari-arian ng z-index

Bilang default, kapag ang dalawang elemento ay may parehong hangganan, ang elementong huling tinukoy sa html markup ay ipapakita sa ibabaw ng isa. Gayunpaman, pinapayagan ka ng z-index property na baguhin ang pagkakasunud-sunod ng mga elemento kapag na-overlay ang mga ito. Ang property ay kumukuha ng numero bilang halaga nito. Ang mga elemento na may mas malaking z-index na halaga ay lalabas sa itaas ng mga elemento na may mas maliit na z-index na halaga.

Halimbawa:

Ngayon, magdagdag tayo ng bagong panuntunan sa estilo ng redBlock block:

RedBlock( z-index: 100; posisyon: absolute; tuktok: 20px; kaliwa:50px; lapad: 80px; taas: 80px; background-color: pula; )

Dito ang z-index ay 100. Ngunit hindi ito kailangang maging numero 100. Dahil ang pangalawang bloke ay may hindi natukoy na z-index at talagang zero, para sa redBlock maaari nating itakda ang z-index na ari-arian sa anumang halaga na mas malaki kaysa sero.

At ngayon ang unang bloke ay magkakapatong sa pangalawa, at hindi kabaligtaran, tulad ng nangyari sa simula.

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
• nakapirming
• malagkit

At pagkatapos lamang itakda ang pagpoposisyon, maaari mong gamitin ang mga katangian na nag-offset sa 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 , 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 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 na nakaposisyong ninuno nito. 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, ililipat ang elemento 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.

Kinakailangang ilipat (i-drag, i-turn over, atbp.) 3 bloke ng pundasyon 300x600x2400 hindi bababa sa 3-5 metro. Ang problema ay ang mga ito ay matatagpuan sa likod ng bahay at walang access para sa isang kreyn o iba pang espesyal na kagamitan.
Nang maglaon ay gusto kong gamitin ang mga bloke upang bumuo ng isang veranda. Ngunit ngayon kailangan ko na lang palayain ang espasyo kung saan sila nakahiga - nagpaplano ako ng gazebo doon.
Ang bigat ng bawat isa (kung tama ang pagbilang ko) ay mga 1 tonelada. Anumang mga saloobin tungkol dito?

Oo, ito ay hindi madali, ngunit ito ay magagawa. Ang aking biyenan at ako ay kumuha ng isang ordinaryong jack ng kotse at ilang, tila, dalawang-pulgada na tubo at isang crowbar. Ang aming tatlong bloke ay nakahiga din sa isang hindi maginhawang lugar, inilipat namin ang mga ito ng mga 15 metro Ginawa namin ito: Sa ilalim ng gilid ng bloke (nakahiga sila sa gilid nito, i.e. sa pinakamalawak na gilid nito) naghukay kami ng isang butas, sapat na malalim para sa isang jack. at isang kamay upang dumaan, kaya iyon ay upang pump ang kanyang pingga. Ang isang maliit na piraso ng flat board ay inilagay sa ilalim ng butas upang hindi mantsang ang jack at upang hindi ito mahukay sa lupa sa ilalim ng pagkarga. Susunod, itinaas nila ang bloke nang medyo disente mula sa isang gilid, tinutulak ito mula sa ibaba gamit ang isang jack. Hindi ko alam kung anong eksaktong anggulo, na may kaugnayan sa lupa, ngunit upang ang ilang kalahating metrong piraso ng tubo ay maaaring mailagay nang pantay-pantay sa ilalim ng bloke. Pagkatapos ay ibinaba ang jack at ang bloke ay inilatag sa mga tubo at na-level na may kaugnayan sa ibabaw ng lupa. Susunod, ang isang crowbar ay ipinasok sa pinakamahabang seksyon ng tubo (~ 1.8 m), na hindi inilagay sa ilalim ng bloke (para sa tigas) at ang hybrid na ito ay ginamit bilang isang pingga, na nagtutulak nito sa ilalim ng kabilang dulo ng bloke at iniangat ito. kamag-anak sa lupa (pagtaas ng anggulo sa pagitan ng pingga at lupa ) itinulak ang bloke na parang palayo sa kanilang sarili. Ang prinsipyo ng paglipat ng mga bloke ng Egyptian pyramids. Sa halip na mga troso lamang, ang mga tubo ay ginamit bilang mga roller. Kung ang lupa ay likido, maaari mo munang, bago ibaba ang jack, maglagay ng mahabang flat board sa ilalim ng mga tubo upang ang bigat ng bloke ay hindi mabaon ang mga tubo. Itinutulak namin, hindi nakakalimutang maglagay ng bagong tubo sa ilalim ng "bow" ng bloke, at ihanda ang inilabas na tubo mula sa ilalim ng "stern" bilang susunod sa ilalim ng bow.
Sa kabuuan, pinagsama namin ang mga bloke na ito sa loob ng 3 taon tuwing tag-araw hanggang sa igulong namin ang mga ito sa gate. Inisip ng lahat kung paano gamitin ang mga ito, ngunit hindi ito naisip. Nag-order kami ng isang manipulator, kinarga niya ang mga ito sa kanyang sarili sa mismong gate at dinala sila palabas sa hindi kilalang direksyon, para sa isang bayad.
Ang mga paghihirap ay bumangon sa mga pagliko kung mayroon man, ngunit posible rin ang lahat kung pinindot mo ang mga tubo sa ilalim ng bloke gamit ang isang sledgehammer, na nagbibigay sa kanila ng direksyon at pagsasaayos ng posisyon ng bloke gamit ang isang pingga mula sa mga gilid. Parang mabigat lang, pero masanay ka na.

P.S. Malaki ang naitulong ng winch na binili namin para sa mga bloke na ito. Ang kawit ng winch ay maaaring ikabit sa mga poste ng bakod (ang sa amin ay nakahawak nang maayos) at ang winch ay maaaring gamitin upang i-drag ang mga bloke sa pamamagitan ng mga tubo patungo sa mga poste na ito. Ang bloke ay dapat magkaroon ng 2 lugs na gawa sa reinforcement, kaya ang winch ay nakakabit sa kanila. Ito ay mas madali kaysa sa pagtulak gamit ang isang pingga, ngunit ito ay tumatagal at nangangailangan din ng maraming pagsisikap - sa lahat ng oras na kailangan mong tumakbo sa paligid upang muling i-hook ang winch sa susunod na post.

P.P.S. Ipinaliwanag sa abot ng aking makakaya Kung mayroon man - sorry.

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:

Relatibong pagpoposisyon

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 pahina ng html:

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 ng pangalawang bloke ang 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 namin ang mga bloke na pinindot 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 itakda ang property na ito sa isa sa apat na value:

• 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 ito ay lumabas 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 nasa kanan ang block ng balita, at ang teksto 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 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 maipahiwatig 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 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. Ang pag-scroll ay magagamit lamang 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 pa sila dapat gamitin. 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 identifier na "blok" ay mananatili sa lugar kapag nag-scroll sa pahina.

Yan lamang 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.

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 mula sa pangkalahatang daloy ng mga elemento na sumusunod sa nakapirming elemento sa daloy ay hindi ito papansinin, gumagalaw at pumalit sa web page.

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 »

Relatibong pagpoposisyon

Ang mga elementong may kaugnay na pagpoposisyon, 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, at 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 kamag-anak na elemento ay karaniwang ginagamit bilang isang magulang para sa mga ganap na elemento.

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 elemento ay inilalagay na may kaugnayan sa window ng browser o nauugnay sa pinakamalapit na nakaposisyong 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.