Iposisyon Kamag-anak - ano ito? detalyadong paglalarawan

Nesting HTML - isang napakahabang proseso, mahigpit na, ngunit napaka-creative. Sa kabila ng katotohanan na para sa karamihan ng mga tao na nagtatrabaho sa IT, mga web page layout ay maaaring mukhang boring na gawain, mga dalubhasang magkaroon ng isang bokasyon para sa ganoong kaso, hindi lamang nang dapat isagawa ang gawain, ngunit ring makatanggap ng mula sa proseso ng nahahawakang kasiyahan.

Gayunpaman, bago ka maging isang bihasang coder, ang bawat bagong dating na ginugugol ng maraming oras sa pag-aaral sa iba't-ibang mga tagubilin at mga pagtutukoy ng parehong wikang HTML, at sa kanyang mga kapanalig - CSS. Tungkol sa eksakto kung ano ang CSS, kung ano ito at kung ano ang "pagpapaimbabaw tainga" ay nagbibigay-daan sa iyo upang makakuha ng up, pati na rin ang isa sa mga top-aari - Posisyon Kamag-anak - ngayon kami ay makipag-usap.

Ano ang CSS?

CSS daglat maaaring transcribe at isinalin sa Russian bilang "cascading style sheet". Ito tunog medyo kakaiba - sa isang kamay, tila malinaw, at mga salita, at sa kabilang - ang pangkalahatang kahulugan ay hindi agad nakunan. may estilo - Magsimula tayo sa mga simpleng Hayaan. Ang teknolohiyang ito ay nagbibigay-daan sa iyo upang i-attach ang mga bagay sa pahina, ang tiyak na mga katangian tungkol sa ang hitsura na maaari ka lamang magrehistro ng isang beses at gamitin ang isang walang-katapusang bilang ng beses.

Ang salitang "table" sa opisyal na translation ay lumitaw halos sa pamamagitan ng aksidente - sa katunayan mas nararapat dito ay magiging upang gamitin ang salitang "listahan" o "listahan", subalit ang mga may-akda ng orihinal na translation ay nagpasya na ang CSS ganito ang hitsura ng higit sa isang listahan, at kung sino tayo tulad ngayon upang subukan ang mga ito.

Sa wakas, ang salitang "Cascade." Ang katotohanan ay na ang bawat elemento ay maaaring magkaroon ng ilang mga estilo na maaaring halo-halong o kahit nagsasapawan. Sa naturang mga kaso, ang mga browser ay may sa resort sa isang hanay ng mga panuntunan, upang gumawa ng sulat ang hitsura ng bloke, na kung saan naka-out na maging ang ilang mga estilo, na may isa sa mga ito, halimbawa, ay may Position Relative ari-arian, at ang iba pang - Posisyon Absolute. Sa katunayan, tulad conflicts ay hindi maaaring disimulado, ngunit sa malalaking proyekto tulad ng pagkalito ang mangyayari ganap madalas.

Kaya ngayon, kapag ang lahat ng bagay ay malinaw mula sa pangalan, tingnan natin ang isang simpleng halimbawa. Sabihin nating ang iyong site ay dapat na isang malaking bilang ng mga pindutan, na idinisenyo sa isang tiyak na paraan. Mayroon silang mga katangian tulad ng laki, anino, opacity, kulay. Of course, maaari mong tukuyin ang mga parameter na ito, ang paglikha ng bawat pindutan, ngunit ito ay lubhang mas madaling upang gamitin ang CSS. Sa pagsasanay, kailangan mo upang ilarawan ang isang tiyak na klase, na naglilista ng mga halaga ng lahat ng mga katangian sa itaas, at pagkatapos, sa halip ng isang mahabang listahan, ang mga tag ng bawat pindutan ay lamang ang kailangan upang tukuyin ang pangalan ng klase, pagkatapos ay ang browser mismo ay kulayan ang mga elementong ito sa nais na kulay at bigyan sila ng maayos na "gloss".

Ano ang ginagawa ng Position ari-arian?

Kami ngayon ay magpatuloy nang direkta sa Position ari-arian, para sa kapakanan ng mga na kung saan ay nagsimula ito buong artikulo. Kung kayo ay pamilyar sa wikang Ingles, o magkaroon ng isang mabuting intuwisyon, pagkatapos ay dapat mayroon ka nang maging malinaw - sa property na ito ay may pananagutan para sa mga lokasyon ng item. Sa katunayan, ang paraan na ito ay, ngunit sa halip matukoy ang partikular na lokasyon, ang property na ito ay nagsasabi ng browser kung paano ito ay dapat na ilagay ang isa o isa pang elemento na may paggalang sa katabi o sa buong pahina bilang isang buo.

Anong mga halaga Maaari Position ari-arian?

Ang aming mga ari-arian ay maaaring tumanggap ng ilang iba't ibang mga halaga, may mga lamang limang. Narito ang isang maikling paglalarawan ng bawat isa:

• Position Manahin. ay nagbibigay-daan ang tampok na ito sa iyo upang kopyahin ang data sa posisyon ng mga sangkap na ay isang magulang. Halimbawa, kung mayroon kang isang div na may isang tinukoy Position Relative, at pagkatapos ay ipinasok sa ito sa IMG halaga ay nagmamana din ay itatakda sa Kamag-anak.
• Iposisyon Static. Ang halagang ito ay ibinibigay sa lahat ng mga elemento awtomatikong, maliban kung nakasaad anumang higit pa. Ang mga elemento magkasya sa posisyon bilang binanggit sa code at hindi magagamit para sa isang iba't ibang mga "frills", na nagpapahintulot sa upang baguhin ang kanilang posisyon.
• Position Absolute. Sa pamamagitan ng ang halaga na ito sa Position ari-arian ay lubos na madalas na ginagamit sa mga kaso kung saan ito ay kinakailangan upang lumikha ng isang "lumulutang" elemento. Sa pamamagitan ng isang naibigay na halaga ng mga item na ari-arian ay "invisible" para sa iba pang mga bahagi ng pahina. Iyon ay, ang mga ito ay nakaayos tulad ng kung ang aming absolute elemento ay hindi umiiral. Siya ang kanyang sarili ay palaging magiging sa lugar, hindi alintana kung gaano kalayo tinanggal scrolled pahina.
• Position Nakatakdang. Sa maraming paraan, ang halaga na ito ay katulad ng nakaraang isa, gayunpaman, habang ang ganap na elemento ay nakasalalay sa mga magulang, naayos mga gamit lamang ang mga coordinate ng sa itaas na kaliwang sulok ng screen browser, hindi papansin ang magpahinga ng ang mga elemento na sinundan nito.
• Sa wakas, Iposisyon Kamag-anak. Ito halaga type nagbibigay-daan sa pagpoposisyon elemento kaugnayan sa iba pang, na maaaring maging kapaki-pakinabang para sa paglikha ng isang agpang pagmamarka tinatawag na sa karaniwan "goma". Sa pamamagitan ng ari-arian na ito, ang item ay "push" ang isa, nang hindi nawawala ang kakayahan upang baguhin ang kanilang mga posisyon sa pahina.

Paggawa gamit Posisyon sa iba't ibang mga browser

Hindi lahat ng mga browser ay pantay compatible. Habang ang karamihang mga alternatibong programa para sa Internet surfing nang walang anumang hitches perceived na halaga ng Posisyon ay ganap na totoo, "chronically espesyal» Internet Explorer Isinasaalang-alang ang ari-arian, depende sa kanyang mga bersyon.

Halimbawa, gamit ang naka-"inilibing" sa browser IE6, hindi mo maaaring gamitin ang mga halaga Fixed at Manahin - "asno" sila balewalain ito. Gayunman, sa kabila ng ang katunayan na ang ikapitong bersyon ng ang sitwasyon ay nagsimulang upang mapabuti, at Nakatakdang naproseso, upang Manahin minamahal "upang i-download iba pang mga browser browser," umabot na lamang sa kanyang ikawalo pagkakatawang-tao.

Ang natitira sa ang mga observers mahinahon mahawakan Posisyon sa unang bersyon, na may pagbubukod sa Opera, na kung saan ay may got ang suporta ng mga ari-arian sa kanyang 4 mga pagkakaiba-iba, na inilathala sa mid-90s.

Paggawa gamit Posisyon sa Javascript

Sa katunayan, ang kuwento ng kung paano upang magtrabaho kasama ang Position ari-arian sa Javascript, nagsama kami lamang para sa kapakanan ng kagandahang-asal. Dahil sa property na ito ay walang anumang mga espesyal na character sa pamagat, maaari mong gamitin ang JS nang walang anumang mga pagbabago, halimbawa, upang i-set ang div Position Relative, dapat isama ang isang linya tulad nito: div.style.position = 'kamag-anak'.

Tulad ng iyong nakikita, ito ay pretty simple.

Bakit Position Relative merito ng espesyal na atensyon?

Habang ang karamihan sa mga halaga ng ari-arian Posisyon, upang ilagay ito nang mahinahon, "samaan ng loob" sa nakapalibot na mga elemento, ang paggamit ng ang halaga ng "style position: relative", dapat na laging tandaan tungkol sa ang buong pahina bilang isang kabuuan, dahil sa hindi wastong paggamit ay maaaring Matindi ang "hilig" ang kabuuang nilalaman ng screen .

Sa karagdagan, ang property na ito ay nagbibigay-daan lamang sa iyo upang madaling-convert nakapirming disenyo agpang, dahil ang application ay awtomatikong makakaapekto sa lahat ng mga pahina ng nilalaman. Pagkatapos kami ay may pa rin ng oras upang isaalang-alang ang mga halimbawa at mga error gamit ang halaga na ito, at makikita mo ang kanyang nahahawakan kabuluhan sa kasanayan.

Kailan dapat mong gamitin ang kamag-anak pagpoposisyon?

Bilang karagdagan sa mga maginoo layout ng mga pahina ng HTML, Position Relative madalas na ginagamit upang lumikha ng isang iba't ibang mga kagiliw-giliw na epekto. Halimbawa, kung nais mo ang isang item na "dumating" sa isang pahina o, sa salungat, ay unti-unting nagpunta lampas sa kanyang teritoryo, ito ay tiyak na ari-arian na ito ay maaaring makatulong sa iyo na ipatupad ang "nanlilinlang".

Ang mga "tricks" ay ipinatupad sa pamamagitan Javascript ay, o, kung ang layunin mo para sa mga progresibong pagpapataw, sa pamamagitan ng mga katangian ng CSS3, na nagbibigay-daan sa iyo upang ayusin ang cyclical pagbabago sa ang halaga ng isang partikular na variable.

Sa karagdagan, sa ilang mga kaso posibleng upang lumikha ng "hybrid" na mga halaga Position Relative. CSS, kahit na hindi sa parehong oras ay nagbibigay-daan sa iyo upang i-set ng isang bagay tulad na posisyon: absolute kamag-anak, ngunit sa pamamagitan ng paggamit ng ilang mga trick, ito ay posible pa rin upang makamit ang effect na ito. diskarte na ito ay maaaring maging kapaki-pakinabang sa mga kaso kung saan kailangan mong lumikha ng isang bagay kumplikadong tulad ng isang tooltip o pop-up menu. Isinasaalang-alang ang mga halimbawa, kami ay magbigay ng isang paglalarawan ng mga istraktura ng tulad ng isang "hybrid."

Halimbawa ng paggamit ng kamag-ranggo

Iposisyon Kamag-anak - ito ay pretty simple, ngunit may kakayahang umangkop na tool na nagbibigay-daan sa iyo upang ipatupad ang isang iba't ibang mga kagiliw-giliw na epekto. Upang hindi upang mag-aaksaya ng oras at lugar na magsulat walang silbi code template, ipinapakita namin ang ilang mga oral algorithm, na maaaring palamutihan iyong site o mga tiyak na mga pahina.

Magsimula tayo sa "maubusan" line Hayaan. Ipagpalagay na mayroon kang isang pangangailangan para sa isang elemento na "paglalakbay" dahil sa kaliwang sulok ng screen at dahan-dahan ilipat ito sa kanang bahagi. Upang ipatupad tulad ng isang "mekanismo" ay dapat magtakda ng position: relative; kaliwa: -100px, kung saan -100 - ang tinatayang bilang ng mga pixels constituting ang lapad block. style na ito ay magbibigay-daan sa iyo upang itago ang yunit sa labas ng screen, paglalagay nito sa "panimulang posisyon". Ngayon ay maaari mong gamitin ang isang script na ay dagdagan sa bawat ilang milliseconds iniwan property value per unit hangga't ito ay hindi magiging katumbas ng lapad ng window ng browser minus ang lapad ng mga elemento. Ang resulta ay isang yunit na nanggagaling sa labas ng kaliwang gilid, na pinagsama sa kabuuan ng screen at "naka-park" sa kanyang kanang kamay.

Ang isa pang halimbawa ay nagbibigay-daan sa iyo upang lumikha ng "kamag-absolute" mga elemento. Halimbawa, maaari kang magpasok ng isang absolute loob ng isa pang, pagkakaroon Position Relative. Bilang isang resulta, kami ay may isang "kamag-anak" block na ay wala sa laki kung saan ang ganap ay inscribed, ay magagawang upang ipakilala ang sarili sa isang posisyon independiyenteng ng nakaraang element ngayon.

Karaniwang pagkakamali kapag gumagamit Position Relative

Ang pinaka-karaniwang pagkakamali kapag gumagamit ng Position Relative ay ang maraming mga web designers kalimutan ang tungkol sa ang kakayahan upang magreserba ng lugar sa ang yunit, na maaaring na matatagpuan kahit saan. Halimbawa, kung mayroon kang isang medyo malaki, na inilagay sa labas ng screen at pagkakaroon ng isang kamag-anak pagpoposisyon, sa lugar nito ay magiging isang nakanganga "butas". Gayunpaman, kahit na property na ito ay minsan ay lumilikha ng ilang mga abala ay maaaring gamitin para sa mabuti, halimbawa, ang paglikha ng isang kawili-wiling epekto ng "self-assembling" ng site, kung saan ang lahat ng mga bloke ay unti-unting inilalagay sa mga nangungunang posisyon: 0; kaliwa: 0; t. e. sa kanyang orihinal na lokasyon.