Chinzvimbo rushomanana - chii? tsananguro hwakadzama

Nesting HTML - yakareba muitiro, zvakaoma, asi zvakasikwa chaizvo. Pasinei chokwadi kuti vanhu vakawanda vaiita IT, pawebsite marongerwo ingaita hakunakidzi yokungoitawo, vanachiremba vane rakapihwa kuti akadaro, kwete chete qualitatively kuita basa, asiwo kubva muitiro chaihwo mafaro.

Zvisinei, usati wava nenguva coder, mumwe waachangoroora inopedzera nguva yakawanda achidzidza mirayiridzo siyana uye nokurondedzerwa zvose mutauro HTML, uye pamusoro yakabatana wayo - CSS. About chaizvo chii CSS, chii uye chii "feint nzeve" kunoita kuti simuka, uyewo imwe yayo pamusoro zvivako - Chinzvimbo rushomanana - nhasi tichataura.

Chii CSS?

CSS chidimbu anogona transcribed uye akashandurirwa Russian se "cascading manyorero machira". Zvinoita runako chinoshamisa - rumwe rutivi, zvinoita sokuti yakajeka, uye mashoko, uye kuno rumwe - mukuru zvinoreva haisi pakarepo akabatwa. Ngatitange pamwe nyore - pamwe Style. Michina iyi kunoita kuti batanidza zvinhu papeji, mamwe maitiro pamusoro chitarisiko kuti iwe unogona chete nyoresa kamwe uye kushandisa isingaperi kanoverengeka.

Shoko "tafura" iri pamutemo shanduro akazviratidza anenge netsaona - chaizvoizvo zvikuru rakakodzera pano aizova kushandisa shoko "mazita" kana "mazita" Zvisinei vanyori shanduro yepakutanga vakasarudza kuti CSS sokunge kupfuura pasi, uye ani tiri kwakadaro ikozvino kuidza.

Pakupedzisira, shoko "Cascade." Chokwadi ndechokuti mumwe ichocho chinogona kuva zvitaera zvakawanda kuti anogona kusanganiswa kana kunyange bindepinde. Muzviitiko zvakadaro, mashoko Browser ane kushandisa mitemo, kuti anyore zvinenge zvakaita anovhara, waitova kuti zvitaera wandei, mumwe wavo Somuenzaniso, ane Chinzvimbo rushomanana pfuma, uye mumwe - Position Dzinofanira. Kutaura zvazviri, kurwisana kwakadaro hazvigoni akashivirira, asi huru zvirongwa kuvhiringidzika kwakadaro zvinoitika kazhinji.

Saka zvino, kana zvose zviri pachena kubva zita, ngatitarisei muenzaniso nyore. Toti nzvimbo yako inofanira kuva vazhinji mabhatani, yakagadzirirwa mune imwe nzira. Vane ehupfumi akadai size, mumvuri, opacity, ruvara. Chokwadi, unogona tsanangurai parameters izvi, kusika mumwe bhatani, asi zviri nyore kushandisa CSS. In tsika, unofanira kutsanangura imwe kirasi, izvo rinodonongodza tsika dzose pamusoro zvivako, uye zvadaro, panzvimbo refu list, iyo chipepa neimwe bhatani zvichaita chete vanofanira kutaridzwa zita mukirasi, ipapo Browser chichavabvambura zvine zvinhu izvi zviri kutsvakwa ruvara uye kuvapa zvakakodzera "Gloss".

Ko Position pfuma?

zvino isu mberi zvakananga pfuma Chinzvimbo, nokuda iro chakatangwa nyaya iyi yose. Kana iwe vanoziva mutauro Chirungu, kana vane kunzwisisa zvakanaka, unofanira kare pachena - pfuma iri kukonzera nzvimbo chinhu. Kutaura zvazviri, nzira zvazviri, asi pachinzvimbo kuona zvariri nzvimbo, pfuma iyi anoudza Browser sei chinofanira kuiswa mumwe kana chimwe chinhu panyaya pedyo kana mhiri peji yose.

tsika anogona Chinzvimbo pfuma chii?

pfuma yedu vanogona kugamuchira tsika siyana, pane vashanu chete. Heino tsananguro pfupi nomumwe:

• Position nhaka. Nyaya iyi kunoita kuti kutevedzera umboo pamusoro nzvimbo chinhu chiri mubereki. Somuenzaniso, kana uine div ane yakanatsa Chinzvimbo Hama, ipapo akapinda pamwe IMG nhaka mutengo zvichasunungurwawo akazviisa kuna rushomanana.
• Position kunofambira mberi. ukoshi ichi kwakapiwa zvinhu zvose zvaitika, kana akataura chinhu. The zvinhu zvinopinda chinzvimbo sezvo anotaurwa bumbiro uye hazvisi kuwanikwa zvakasiyana-siyana "frills", vachibvumira kuchinja nzvimbo yavo.
• Position Dzinofanira. By ukoshi urwu Chinzvimbo pfuma iri kazhinji kushandiswa zviitiko apo zvakakodzera kusika munhu "zvinoyangarara" maatomu akafanana. Aine akapiwa kukosha pfuma chinhu chiri "chisingaoneki" mamwe zvinoumba peji. Ndiko, vari vakaronga sokunge yedu Mhedziso maatomu akafanana haako. Iye pachake vachagara panzvimbo, pasinei kure kare scrolled peji.
• Position Fixed. Munzira dzakawanda, ukoshi ichi Zvisinei hwakafanana yapfuura mumwe,, apo Mhedziso chinhu akasungwa kuna mubereki, pazvinhu pevara chete Coordonatele rokumusoro rworuboshwe kukona Browser chidzitiro, vachisiya mamwe zvinhu yokutanga.
• Pakupedzisira, Position rushomanana. Izvi mhando tsika anobvumira Positioning chaikosha hama kune mumwe, zvinogona kubatsira kusika chinhu adaptive chokuguma akadana zvakafanana "rabha". With pfuma iyi, chinhu chacho uye "vasundire" mumwe, pasina kurasikirwa anogona kuchinja maonero avo pamusoro peji.

Kushanda Chinzvimbo mu browsers siyana

Havasi browsers zvose vanoitirwawo enderana. Kunyange zvazvo nzira zvirongwa Internet Surfing asina hitches vakanzwisisa kukosha Chinzvimbo iri zvachose wechokwadi, "chirwere chinokosha» Internet Explorer anoongorora pfuma, zvichienderana ayo Bhaibheri.

Somuenzaniso, kushandisa kare "akavigwa" ari Browser IE6, haugoni kushandisa ukoshi Fixed uye nhaka - "mbongoro" vanongovhura hanya nayo. Zvisinei, pasinei nokuti rechinomwe shanduro ezvinhu akatanga kunatsa, uye Fixed kare kupatsanurwa, nhaka mudiwa "Browser kukopa mamwe browsers," akatambanudza chete zimukadzimu kwayo rorusere.

Vamwe vanoona zvakadzikama kubata Chinzvimbo yokutanga shanduro, kunze Opera, izvo mune kutsigirwa zvivako kwayo 4 zvakasiyana, rakabudiswa muna nemakore 90s.

Kushanda Position muna JavaScript

Kutaura zvazviri, nyaya sei kushanda pamwe Chinzvimbo pfuma muna JavaScript iri, isu zvinosanganisira chete nokuda undere. Nekuti pfuma iyi hazvina chinokosha vatambi vari rokuti, unogona kushandisa JS isina kuchinja Somuenzaniso, kugadza div Chinzvimbo rushomanana, inofanira kusanganisira mutsetse seizvi: div.style.position = 'hama'.

Sezvaunogona kuona, zviri zvakanaka nyore.

Sei Chinzvimbo rushomanana dhigirii vainyatsotarisirwa?

Kunyange zvazvo dzakawanda pfuma tsika Chinzvimbo, kuti akariisa zvinyoronyoro, "akapfira mate" pamusoro dzakapoteredza okunze, achishandisa kukosha "manyorerwo nzvimbo: hama", vanofanira kugara yeuka pamusoro yose peji rose, nekuti kushandiswa zvisina kunaka dai zvakasimba "skew" zviri yose chidzitiro .

Uyezve, pfuma ichi chete kunoita kuti kutendeutsa yakamisirwa kugadzira adaptive nyore, nokuti kushandisirwa vachangoerekana kukanganisa zvose kugutsikana mapeji. Zvadaro tichine nguva yokuongorora mienzaniso uye zvikanganiso vachishandisa kukosha ichi, uye iwe uchaona zvayo chaihwo kukosha uchidzidzira.

Kana uchifanira kushandisa hama Positioning?

Kuwedzera kune kwakajairika marongerwo mapeji HTML, Chinzvimbo rushomanana aiwanzoshandisa kusika dzakasiyana-siyana dzinonakidza migumisiro. Somuenzaniso, kana uchida chinhu "akauya" ari papeji kana nekusiyana, zvishoma nezvishoma akaenda mhiri munharaunda yayo, chaizvoizvo pfuma iyi kunogona kukubatsira kushandisa ichi "minimini".

Izvi "mazano" vari chinozoiswa kuburikidza JavaScript ndiko, kana, kana iwe ndanzwawo kuti mberi nokuiswa, kuburikidza ehupfumi ose CSS3, hunoita kuti kuchinja cyclical shanduko kukosha imwe shanduka.

Uyezve, dzimwe nguva zvichiita kuti pave "chemasanganiswa" tsika Position Hama. CSS, kunyange asina panguva imwe chete kunoita kuti kuisa chimwe chinhu chakafanana chinzvimbo: mhedziso hama, asi achishandisa mamwe emazano okunyengera, zvichiri zvinogoneka kuita izvi. Izvi zvinogona kubatsira munyaya apo unofanira kusika chinhu zvakaoma akafanana munhu tooltip kana abuda Muterere. Uchifunga mienzaniso, Tichavonga rondedzero sechivako yakadaro "remasanganiswa."

Mienzaniso kushandisa hama chepamusoro

Chinzvimbo rushomanana - zviri akanaka nyore, asi vakasununguka chokushandisa unokubvumira kushandisa dzakasiyana-siyana dzinonakidza migumisiro. Kuti varege kutambisa nguva nenzvimbo kunyora maturo Bumbiro template, ratinoparidza vanoverengeka nemumuromo algorithms, izvo zvinogona shongedza nzvimbo yako kana mapeji yakananga.

Ngatitange ne "kupera" mutsetse. Ngatitii une kudiwa chinhu ichocho kuti zvichaita "pakufamba" nokuti vakasiya kumucheto chidzitiro uye zvishoma nezvishoma kuibvisa kurudyi divi. Kushandisa "mashandiro" akadaro vanofanira kuisa nzvimbo: hama; kuruboshwe: -100px, apo -100 - the anofungidzirwa kuwanda pixels vanoumba iri nechepamberi upamhi. Style ichi kuchaita kuti kuvanza chairema kunze chidzitiro, Akariyanika mu "kutanga nzvimbo". Zvino unogona kushandisa manyorero kuti zvichawedzera ose milliseconds vashoma pfuma ukoshi paminiti chikwata chero hazvina kufanana upamhi muhwindo kubvisa upamhi maatomu akafanana. Zvinoguma chikwata inobuda unopinza kuruboshwe, akakungurutsa mhiri chidzitiro uye "dzakamiswa" muruoko rwake rworudyi.

Mumwe muenzaniso unokubvumira chokusika "hama-mhedziso" zvinhu. Somuenzaniso, unogona kupinda nemhedziso mukati mumwe, tine Position Hama. Somugumisiro, tine "hama" misa kuti haana kukura kuti Mhedziso rakanyorwa, zvino kukwanisa kuoneka munzvimbo yakazvimirira rapfuura maatomu akafanana.

zvikanganiso Typical paaishandisa Position rushomanana

The chikanganiso Inonyanya kana uchishandisa Chinzvimbo rushomanana ndechokuti vakawanda padandemutande vagadziri vanokanganwa pamusoro kukwanisa kuchengetera nzvimbo iri chikwata, izvo zvinogona iri kupi. Somuenzaniso, kana uine nokururamisira guru, akaisa kunze chidzitiro uye ane hama Positioning, panzvimbo yayo ichava gaping "mugomba". Zvisinei, kunyange pfuma iyi dzimwe nguva pave zvimwe nechinouya inogona kushandiswa zvakanaka Somuenzaniso, nokusika inonakidza mugumisiro "kuzvidzora kuungana" kwenzvimbo, apo vose kutigumbura ayo zvishoma akaiswa pamusoro nzvimbo: 0; kuruboshwe: 0; t. e. nzvimbo yaro yepakutanga.