Posisyon Kalabot - unsa man kini? detalyado nga paghulagway

Nesting HTML - sa usa ka taas nga proseso, rigorous, apan kaayo mamugnaon. Bisan pa sa kamatuoran nga alang sa kadaghanan sa mga tawo nagtrabaho sa IT, mga panid sa web layout daw makatalaka nga rutina, mga espesyalista nga adunay usa ka bokasyon alang sa maong usa ka kaso, dili lamang sa qualitatively sa pagdala sa buluhaton, apan usab makadawat gikan sa proseso sa mahikap nga kalipay.

Apan, sa wala pa kamo mahimong usa ka batid nga coder, ang matag bag-ong mogahin sa usa ka daghan sa mga panahon sa pagtuon sa mga nagkalain-laing mga panudlo ug mga specifications sa mga pinulongan HTML, ug sa ibabaw sa iyang kaalyado - CSS. Mahitungod sa gayud sa unsa CSS, unsa kini ug unsa ang "feint igdulungog" nagtugot kaninyo sa pagkuha sa, ingon man usab sa usa sa iyang mga top kabtangan - posisyon Kalabot - karon kita makig-estorya.

Unsa ang CSS?

CSS pinamubo mahimong transcribed ug gihubad ngadto sa Russian nga ingon nga "misulti estilo sheets". Kini paminawon pretty nga lain - sa usa ka bahin, kini daw tin-aw, ug mga pulong, ug sa ibabaw sa uban nga mga - ang kinatibuk-ang kahulogan dili diha-diha dayon nadakpan. uban sa estilo - ni magsugod uban sa mga walay-pagtagad Himoa. Kini nga teknolohiya nagtugot kaninyo sa padapat, patampo sa mga butang sa pahina, ang pipila ka mga kinaiya mahitungod sa panagway nga ikaw lamang register sa makausa ug sa paggamit sa usa ka walay kinutuban nga gidaghanon sa mga panahon.

Ang pulong nga "lamesa" sa opisyal nga hubad nagpakita hapit pinaagi sa aksidente - sa pagkatinuod mas angay dinhi nga sa paggamit sa pulong nga "mga listahan" o "mga listahan", Apan ang mga tigsulat sa mga orihinal nga hubad nakahukom nga ang CSS tan-awon sama sa labaw pa kay sa usa ka listahan, ug nga kita maong mao na karon aron sa pagsulay kanila.

Sa katapusan, ang pulong nga "pagbusay." Ang kamatuoran mao nga ang matag elemento mahimong adunay pipila ka estilo nga mahimong nga sinaktan o bisan sapaw. Sa maong mga kaso, ang browser adunay nga modangop ngadto sa usa ka hugpong sa mga lagda, aron sa naglangkob sa dagway sa mga block, nga nahimo gikan nga mahimong pipila ka mga estilo, uban sa usa kanila, alang sa panig-ingnan, adunay usa ka posisyon Kalabot kabtangan, ug ang uban nga mga - Baroganan Hingpit. Sa pagkatinuod, ang maong mga panagbangi dili gitugotan, apan sa dako nga proyekto sa maong kalibog mahitabo na sa kanunay.

Busa karon, sa diha nga ang tanang mga butang mao ang tin-aw nga gikan sa ngalan, atong tan-awon sa usa ka yano nga panig-ingnan. Ang ni-ingon sa imong site kinahanglan nga usa ka dako nga gidaghanon sa mga butones, nga gidisenyo sa usa ka paagi. Sila adunay kabtangan sama sa gidak-on, landong, opacity, kolor. Siyempre, kamo makahimo sa hingalan niini nga mga lantugi, pagmugna sa matag button, apan mao ang mas sayon nga gamiton CSS. Sa praktis, kamo kinahanglan nga sa paghulagway sa usa ka klase, nga naglista sa mga prinsipyo sa tanan sa mga kabtangan sa ibabaw, ug unya, sa baylo nga sa usa ka taas nga listahan, ang tag sa matag button lamang kinahanglan nga hingalan sa ngalan sa klase, nan ang browser mismo kolor niini nga mga elemento sa gitinguha nga kolor ug sa paghatag kanila sa usa ka tukma nga "gloss".

Unsa ang posisyon kabtangan?

Kita karon mopadayon direkta ngadto sa mga posisyon kabtangan, alang sa kaayohan sa nga nagsugod kini sa tibook nga artikulo. Kon ikaw pamilyar sa pinulongan Iningles, o usa ka maayo nga intuition, nan kamo kinahanglan nga na nga tin-aw - kabtangan kini mao ang responsable alang sa nahimutangan sa mga butang. Sa pagkatinuod, ang paagi nga kini mao, apan sa baylo pagtino sa piho nga lokasyon, kabtangan niini nga nagsulti sa browser sa unsa nga paagi kini kinahanglan nga gibutang sa usa o sa lain nga elemento uban sa pagtahod ngadto sa tapad o sa tibuok panid nga ingon sa usa ka bug-os nga.

Unsa nga mga hiyas nga paagi nga ang posisyon kabtangan?

Ang atong mga kabtangan mahimong modawat sa pipila ka lain-laing mga hiyas, adunay mga lamang sa lima ka. Ania ang usa ka mubo nga paghulagway sa matag usa:

• Posisyon makapanunod. nagtugot Kini nga bahin kaninyo sa pagkopya sa mga data sa posisyon sa mga elemento nga mao ang usa ka ginikanan. Pananglitan, kon ikaw adunay usa ka div uban sa usa ka espesipikong posisyon Kabanay, unya misulod ngadto sa niini uban sa IMG bili makapanunod usab nga ibutang sa Kalabot.
• Posisyon nagahunong. bili Kini gihatag ngadto sa tanan nga mga elemento awtomatikong, gawas kon gipahayag sa bisan unsa nga labaw pa. Ang mga elemento mohaum ngadto sa posisyon nga gihisgutan diha sa code ug dili magamit alang sa usa ka matang sa "frills", pagtugot sa pag-usab sa ilang mga posisyon.
• Posisyon Hingpit nga. Pinaagi niini nga bili sa posisyon kabtangan mao na kasagaran nga gigamit sa mga kaso diin kini mao ang gikinahanglan aron sa paghimo sa usa ka "naglutaw" elemento. Uban sa usa ka gihatag nga bili sa butang kabtangan mao ang "dili-makita nga" alang sa uban nga mga sangkap sa mga panid. Nga mao, sila gihan-ay ingon nga kon ang atong bug-os nga elemento wala maglungtad. Siya sa iyang kaugalingon kanunay sa dapit, sa walay pagtagad sa kon sa unsang paagi nga layo na scrolled panid.
• Posisyon Lig-on. Sa daghang mga paagi, kini nga bili mao ang susama sa miaging usa ka, Apan, samtang ang bug-os nga elemento mao ang gigapos sa ginikanan, natudlong gamit lamang ang mga coordinates sa ibabaw sa walang bahin sa screen browser, nga wala manumbaling sa uban nga mga elemento nga nag-una niini.
• Sa katapusan, magpahamutang Kalabot. Kini nga mga prinsipyo nga matang nagtugot positioning elemento paryente ngadto sa lain, nga mahimong mapuslanon alang sa pagmugna sa usa ka mapaigoigoon marka nga gitawag sa komon nga "rubber". Uban sa kabtangan niini, ang butang nga "iduso" ang uban nga mga, sa walay pagkawala sa sa abilidad sa pag-usab sa ilang mga posisyon sa panid.

Ang pagtrabaho uban sa posisyon sa lain-laing mga browsers

Dili tanan nga mga browsers mga parehong compatible. Samtang kadaghanan sa alternatibo nga mga programa alang sa Internet surfing nga walay bisan unsa nga hitch nakasabut sa bili sa posisyon mao ang hingpit nga tinuod, "kanunayng espesyal» Internet Explorer giisip sa kabtangan, depende sa iyang version.

Kay sa panig-ingnan, sa paggamit sa mga na "gilubong" sa browser IE6, kamo dili sa paggamit sa bili Lig-on ug makapanunod sa - "asno" sila lamang ibaliwala kini. Apan, bisan pa sa kamatuoran nga ang ikapito nga bersyon sa kahimtang nagsugod sa pagpalambo sa, ug sa Lig-on na proseso, sa Makapanunod hinigugma "sa pag-download sa uban nga mga browsers browser,"-ot lamang sa iyang ikawalo nga pagpakatawo.

Ang uban nga mga obserber kalma pagdumala Posisyon uban sa unang bersyon, uban sa gawas sa Opera, nga nakakuha sa suporta sa mga kabtangan diha sa iyang 4 kalainan, nga gipatik sa mga tunga-tunga sa 90s.

Ang pagtrabaho uban sa posisyon sa Javascript

Sa pagkatinuod, ang istorya kon sa unsang paagi sa pagtrabaho uban sa mga posisyon kabtangan sa Javascript mao, kita naglakip lamang tungod sa kaligdong. Tungod kay ang kabtangan niini nga wala sa bisan unsa nga espesyal nga mga karakter diha sa titulo, kamo makahimo sa paggamit sa JS nga walay bisan unsa nga mga kausaban, alang sa panig-ingnan, aron sa sa div posisyon Kalabot, kinahanglan nga maglakip og usa ka linya nga sama niini: div.style.position = 'paryente'.

Samtang kamo mahimo tan-awa, kini pretty yano nga.

Nganong posisyon Kalabot maayo nga buhat sa espesyal nga pagtagad?

Samtang ang kadaghanan sa mga mithi sa kabtangan posisyon, sa pagsalikway niini mildly, "kanhi" sa palibot nga mga elemento, sa paggamit sa bili "estilo posisyon: paryente", kinahanglan kanunay mahinumdom mahitungod sa tibuok nga panid sama sa sa usa ka bug-os nga, tungod kay ang sayop nga paggamit aron hugot nga "ambihás" ang bug-os nga sulod sa screen .

Dugang pa, kabtangan niini nga nagtugot lamang kamo sa dali nga kinabig natudlong design mapaigoigoon, tungod kay ang iyang aplikasyon awtomatikong makaapekto sa tanan nga mga panid sulod. Unya kita gihapon panahon sa paghunahuna sa mga panig-ingnan ug kasaypanan sa paggamit niini nga bili, ug kamo makakita sa iyang makita nga kahulugan diha sa buhat.

Sa diha nga kamo kinahanglan nga mogamit sa paryente positioning?

Dugang pa sa mga conventional Layout sa mga panid HTML, posisyon Kalabot sa kasagaran nga gigamit sa paghimo sa usa ka matang sa makapaikag nga mga epekto. Pananglitan, kon gusto ang usa ka butang "miabut" sa usa ka pahina o, sa sukwahi, anam-anam nga miadto sa unahan sa iyang teritoryo, kini mao ang tukma kabtangan niini nga makatabang kanimo sa pagpatuman niini nga "lansis".

Kini nga "mga limbong" mga gipatuman pinaagi sa Javascript mao, o, kon tumong kamo alang sa progresibong pagpatuman, pinaagi sa mga kabtangan sa CSS3, nga motugot kaninyo sa pag-adjust sa mga balik-balik nga kausaban sa sa bili sa usa ka partikular nga baryable.

Dugang pa, sa pipila ka kaso nga posible sa paghimo sa "hybrid" nga mga prinsipyo posisyon Kalabot. CSS, bisan tuod dili sa samang higayon nagtugot kaninyo sa sa usa ka butang nga sama sa posisyon: bug-os nga paryente, apan pinaagi sa paggamit sa pipila ka mga mga limbong, kini mao ang posible nga sa gihapon aron sa pagkab-ot epekto niini. Kini nga pamaagi mahimo nga mapuslanon sa mga kaso sa diin kamo kinahanglan nga sa paghimo sa usa ka butang nga complex sama sa sa usa ka tooltip o pop-up menu. Tungod sa panig-ingnan, kita sa paghatag sa usa ka paghulagway sa istruktura sa maong usa ka "hybrid."

Mga panig-ingnan sa paggamit sa paryente ranking

Posisyon Kalabot - kini pretty yano, apan flexible himan nga nagtugot kaninyo sa pagpatuman sa usa ka matang sa makapaikag nga mga epekto. Aron nga dili-usik sa panahon ug ibutang sa pagsulat walay pulos code template, kita igahalad sa pipila oral algorithms, nga decorate sa imong site o piho nga mga panid.

ni magsugod sa "modagan gikan sa" linya Himoa. Ibutang ta nga ikaw adunay usa ka panginahanglan alang sa usa ka elemento nga "travel" tungod kay sa wala sulab sa screen ug sa hinay-hinay nga mobalhin kini sa too nga kiliran. Sa pagpatuman sa maong usa ka "mekanismo" kinahanglan ibutang posisyon: paryente; sa wala: -100px, diin -100 - ang gibanabanang gidaghanon sa mga pixels naglangkob sa gilapdon block. estilo Kini nga magtugot kaninyo sa pagtago sa mga yunit gawas sa screen, sa pagbutang niini diha sa "sugod posisyon". Karon nga imong mahimo sa paggamit sa usa ka script nga molambo matag pipila milliseconds mibiya sa kabtangan bili matag yunit samtang nga kini dili mahimo nga sama sa gilapdon sa bintana browser minus ang gilapdon sa elemento. Ang resulta mao ang usa ka yunit nga moabut gikan sa sa wala sulab, giligid sa tibuok screen ug "giparking" diha sa iyang tuo nga kamot.

Laing pananglitan nagtugot kaninyo sa pagmugna og "paryente-hingpit" mga elemento. Kay sa panig-ingnan, nga kamo mahimo sa pagsulod sa usa ka bug-os sa sulod sa usa, nga may posisyon Kalabot. Ingon sa usa ka resulta, kita adunay usa ka "paryente" block nga dili sa gidak-on nga ang bug-os nga gisulat, mao ang makahimo sa pagpakita sa iyang kaugalingon sa usa ka posisyon nga independente sa mga miaging elemento karon.

Sagad nga sayop sa diha nga ang paggamit sa posisyon Kalabot

Ang labing komon nga sayop sa diha nga ang paggamit sa posisyon Kabanay mao nga sa daghan nga mga web designers kalimtan ang bahin sa abilidad sa Reserve usa ka dapit diha sa yunit, nga mahimo nga nahimutang sa bisan asa. Pananglitan, kon ikaw adunay usa ka minatarong, sa maayohon ka dako, gibutang sa gawas sa screen ug may usa ka paryente positioning, sa iyang dapit mahimong usa ka gisi sa "lungag". Apan, bisan pa sa kabtangan niini nga usahay nagmugna ka inconveniences mahimong gamiton alang sa maayo, kay sa panig-ingnan, sa paghimo sa usa ka makapaikag nga epekto sa "-sa-kaugalingon pagtipon" sa site, diin ang tanan sa iyang mga bloke nga hinay-hinay nga gibutang sa ibabaw posisyon: 0; wala: 0; t. e. sa iyang orihinal nga nahimutangan.