Isikhundla esihlobene - siyini? Incazelo eningiliziwe

Ukuhlelwa kwe-HTML kuyinkqubo ende, ehlakaniphile, kodwa edala kakhulu. Naphezu kokuthi abantu abaningi abasebenza enkambeni ye-IT, ukuhlelwa kwamakhasi ewebhu kungabonakala kuwumkhuba othakazelisayo, ochwepheshe abanamathuba okuthiwa into enjalo hhayi nje kuphela ukwenza imisebenzi ngekhwalithi, kodwa futhi bathola injabulo ebonakalayo kusukela ohlelweni ngokwabo.

Kodwa-ke, ngaphambi kokuthi ube umklami wewebhu owaziwayo, u-newbie ngamunye uchitha isikhathi esiningi efunda imiyalelo ehlukahlukene kanye nokucaciswa kokubili kolimi lwe-HTML kanye ne-ally CSS yalo. Mayelana nokuthi yi-CSS, ukuthi kuyini nokuthi "izimpendulo ezinezindlebe" zikuvumela ukuthi uvuke, futhi futhi ngesakhiwo esisodwa sithandwa kakhulu - Isikhundla esihlobene - sizokhuluma namhlanje.

Iyini i-CSS?

Isifinyezo se-CSS singagcinwa futhi sihunyushwe ngesiRashiya njengama-"style styles sheets". Kuzwakala kuyinqaba - ngakolunye uhlangothi, njengamazwi futhi kuyaqondakala, kodwa ngakolunye uhlangothi - incazelo ejwayelekile ayibanjwanga ngaso leso sikhathi. Ake siqale ngokulula - ngezitayela. Lolu buchwepheshe lukuvumela ukuba unikeze izinto ezisekhasini izici ezithile eziphathelene nokubukeka, okungahle kunqunywe kanye kuphela, kepha kusetshenziswe inani elingapheli izikhathi.

Igama elithi "amatafula" kuhumusho olusemthethweni lube cishe cishe ngengozi. Eqinisweni, kuyoba kufaneleka kakhulu ukusebenzisa igama elithi "amashidi" noma "izinhlu", kodwa abalobi bokuhumusha kwasekuqaleni banquma ukuthi i-CSS ibukeka njengobaluhlu kunalolu hlu, nokuthi singobani Njengokuba manje bahlulelwa.

Ekugcineni, leli gama elithi "hamba". Iqiniso liwukuthi isici ngasinye singaba nezitayela eziningana ngesikhathi esisodwa, okungaxubaniswa noma ngisho nokuhlukaniswa. Ezimweni ezinjalo, isiphequluli kufanele sibheke emithethweni eminingi, ukuze kubhalwe ngokuqondile ukubonakala kwebhulothi, enezitayela eziningana, ngomunye wabo, isibonelo, unendawo yePosition Relative, enye -Isikhundla Sokungaqondile. Eqinisweni, izingxabano ezinjalo azikwazi ukubekezelela, kodwa kumaphrojekthi amakhulu ukudideka okunjalo kwenzeka kaningi.

Ngakho, manje ukuthi igama licacile, ake sibheke isibonelo esisodwa esilula. Ake sithi unenombolo enkulu yezinkinobho kuwebhusayithi yakho eyenzelwe ngendlela ethile. Zinezici ezinjengobukhulu, isithunzi, ukubonakala, umbala. Yiqiniso, ungacacisa lezi zimingcele, udale inkinobho ngayinye, kodwa kuzoba lula ukusebenzisa i-CSS. Ngokwenza njalo, udinga ukuchaza ekilasini lapho amanani azo zonke izakhiwo ezingenhla azofakwa ohlwini, futhi, esikhundleni sokubhalisa isikhathi eside, umaki wenkinobho ngayinye kuzodinga kuphela ukucacisa igama laleli klasi, emva kwalokho isiphequluli sizopenda lezi zinto ngemibala edingekayo bese ubanikeze kahle "I-Gloss".

Kungani ngidinga impahla yePosition?

Manje ake sishukuthele ngqo kuMphathi wePosition, okuyiwona wonke ama-athikili awakhiwe. Uma ujwayele isiNgisi noma unomqondo omuhle, khona-ke kufanele uqonde kakade - le ndawo inesibopho sendawo. Empeleni, kungukuthi, esikhundleni sokuchaza indawo ethile, le mpahla isitshela isiphequluli ukuthi ingabeka kanjani into ngokuqondile nomakhelwane noma lonke ikhasi lonke.

Yiziphi izindinganiso ezingathatha indawo yePosition?

Impahla yethu ingathatha amanani amaningana ahlukene, kunezinhlanu kuphela. Nansi incazelo emfushane ngayinye yazo:

• Isikhundla Ifa. Le ndawo ikuvumela ukukopisha idatha yendawo yento engumzali. Isibonelo, uma une-Div ne-Position Relative ecacisiwe, khona-ke i-IMG ebhaliwe ngenani elizuzwayo lizophinde lizuze inani lobudlelwane.
• Isikhundla esiqinile. Leli nani linikezwa kuzo zonke izakhi ngokuzenzekelayo, ngaphandle uma kuchaziwe ngenye indlela. Izinto zihambisana nesimo njengoba zikhonjisiwe kule khodi futhi azitholakali "ezinhlobonhlobo" ezihlukahlukene ezibavumela ukuba bashintshe isikhundla sabo.
• Isikhundla esingenalutho. Leli xabiso leMpahla yePhakamiso livame ukusetshenziswa lapho kunesidingo ukudala isici "esintantayo". Ukuba nalesi sakhiwo samanani, isici sisekhona "esingabonakali" sekhasi lonke. Okusho ukuthi, zikhona njengokungathi isici sethu esiphelele asikho nhlobo. Yena ngokwakhe uyohlale ehlala endaweni, kungakhathaliseki ukuthi ikhasi lide kangakanani.
• Isikhundla sihleliwe. Ngezici eziningi leli xabiso lifana nelinye langaphambilini, noma kunjalo, ngenkathi isici esiphelele sinamathele kumzali, ukusetshenziselwa okuhleliwe kuphela izixhumanisi zekhoneni eliphezulu elingakwesokunxele kwesikrini sesiphequluli, hhayi ukunaka ezinye izakhi ezandulele.
• Ekugcineni, Isikhundla esihlobene. Lolu hlobo lwexabiso lukuvumela ukuba ubeke isici esihlobene nabanye, okungaba usizo lapho udala umaka oguquguqukayo, obizwa ngokuthi "i-rubber" kubantu abavamile. Ukuba nalesi sakhiwo, isici "sizohamba" nabo bonke, ngaphandle kokulahlekelwa ikhono lokushintsha indawo yayo ekhasini.

Izici zomsebenzi nezikhundla ezipheqululini ezahlukene

Akuzona zonke iziphequluli ezihambisanayo ngokufanayo. Ngenkathi izinhlelo eziningi zokungena nge-intanethi ngaphandle kokushaywa phansi kubona ukuthi ukubaluleka kwePosition kuqinisile, "okhethekile" i-Internet Explorer ibheka le ndawo kuye ngokuthi inguqulo yayo.

Isibonelo, usebenzisa isiphequluli se-IE6 esivele sesifikile, awukwazi ukusebenzisa ama-Fixed and Heritage - amadonki amane awanaki. Kodwa-ke, naphezu kokuthi inguqulo yesikhombisa isimo saqala ukulungiswa, futhi i-Fixed isivele isetshenziselwa, ukuze Ifa wonke umuntu athande "isiphequluli sokulanda ezinye iziphequluli" kufinyelelwe kuphela kwifomu layo lesishiyagalombili.

Bonke ababuyekezi babamba ngokuthutha ukuma esikhundleni sezinguqulo zokuqala, ngaphandle kwe-Opera, eyathola ukusekelwa kwalesi sakhiwo ngezimo zayo ezingu-4, ekhishwe maphakathi nawo-90.

Ukusebenza Isikhundla ku-Javascript

Eqinisweni, indaba yokusebenza nempahla yePosition ku-Javascript, sifakwe kuphela ngenxa yokufaneleka. Njengoba le ndawo ingenayo izinhlamvu ezikhethekile egameni, ungasebenzisa i-JS ngaphandle kwezinguquko, isibonelo, ukusetha i-Position Relative div, kufanele ufake lo mkhakha: div.style.position = 'relative'.

Njengoba ubona, konke kulula.

Kungani i-Position Relative ifanelwe ukunakwa okukhethekile?

Ngenkathi iningi lamagugu e-Position property, ukuyibeka ngomoya ophansi, "ukukhahla" ezakhiweni ezizungezile, usebenzisa inani "isitayela sokuma: isihlobo", ngaso sonke isikhathi kubalulekile ukukhumbula lonke leli phepha, ngoba ukusetshenziswa kwayo okungalungile kungenza "kuphazamise" okuqukethwe konke kwesikrini .

Ngaphezu kwalokho, kuphela le ndawo ikuvumela ukuthi uguqule kalula umklamo ohleliwe ube oguquguqukayo, ngoba uhlelo lwakho lokusebenza luthinta ngokuzenzakalelayo konke okuqukethwe kwekhasi. Okulandelayo, sisenesikhathi sokucabangela izibonelo namaphutha okusebenzisa leli xabiso, futhi uzobona ukubaluleka kwalo okubonakalayo ekusebenzeni.

Kufanele ngisebenzise nini ukuma kwesihlobo?

Ngaphandle kokuhlelwa kwamakhasi ajwayelekile we-HTML, Isikhundla Relative sivame ukusetshenziswa ukudala imiphumela ehlukahlukene ezithakazelisayo. Isibonelo, uma ufuna isici "ukuza" ekhasini noma, ngokuphambene nalokho, hamba kahle emaphethelweni ayo, khona-ke le ndawo ingakusiza ukuba uqaphele lokhu "ukuphazamiseka".

"Amaqhinga" afanayo asetshenziswa ngeJavascript, noma, uma uzama ukuhlela okuqhubekayo, ngokusebenzisa izindawo ze-CSS3, okuvumela ukuthi ulungise ushintsho lwe-cyclic ngenani lokuguquguquka.

Ngaphezu kwalokho, kwezinye izimo, kungenzeka ukudala "ama-hybride" Amanani ahlobene ngokobuhlobo. I-CSS, nakuba ayikuvumeli ukubakanye ngesikhathi esifanayo ukubeka into efana nesimo: isihlobo esiphelele, kodwa usebenzisa ezinye izinyathelo, usengakwazi ukufeza lo mphumela. Le ndlela ingaba usizo kulawo maso uma udinga ukwakha into efana ne- tooltip eyinkimbinkimbi noma imenyu yokuqukethwe. Uma sicabangela lezi zibonelo, ngokuqinisekile sizochaza isakhiwo salo "hybrid".

Izibonelo zokusebenzisa ukuma kwezihlobo

Isikhundla esihlobeneyo siyithuluzi elilula kodwa eliguquguqukayo elikuvumela ukuba usebenzise imiphumela eminingi ezithakazelisayo. Ukuze ungachithi isikhathi nesikhala ekubhaleni amakhodi angenamsebenzi amathempulethi, sinikeza iziqalo zomlomo ezingahle zihlobise isayithi lakho namakhasi awo ngabanye.

Ake siqale ngomugqa "ophuma". Ake sithi unesidingo sezinto ezizo "hamba "ngemuva komngcele ongakwesokunxele kwesikrini futhi kancane kancane uye kwesokunene. Ukuze usebenzise "indlela" enjalo, udinga ukubeka isikhundla: isihlobo; Kwesobunxele: -100px, lapho -100 inombolo ehambayo yamaphikseli akha ibubanzi bendawo. Lesi sitayela sizokuvumela ukufihla ibhulogi ngaphandle kwesikrini, ukuyibeka "esimweni sokuqala". Manje ungasebenzisa iskripthi esandisa inani lempahla engakwesokunxele kuwo wonke ama-millisecond ambalwa kuze kube lilingana nobubanzi besiphequluli sewindi lesishiyagalombili ekunciphiseni ububanzi besici. Ngenxa yalokho, sithola ibhulogi evela ngemuva kwesokunxele kwesokunxele, igxilile kuso sonke isihenqo futhi "sipakwe" ngakwesokudla sayo.

Esinye isibonelo sikuvumela ukuthi udale izakhi "ezilinganiselwe". Isibonelo, ungangena ngaphakathi ngaphakathi komunye onesixhumanisi sokuma. Ngenxa yalokho, sinesivimbela "sesihlobo" esingenalo usayizi, lapho okubhalwe khona ngokuphelele, okukwazi ukuzibonakalisa esimweni esithathwe yizici ezandulele.

Amaphutha avamile uma usebenzisa Isikhundla esihlobene

Iphutha elivame kakhulu uma usebenzisa i-Position Relative yilabo abakhi bezinhlelo eziningi abakhohlwa ukuthi bayakwazi ukugcina isikhala se-block okungaba yikuphi. Isibonelo, uma unomkhulu kakhulu, ubeke ngaphandle kwesikrini futhi ube nokuma kwesihlobo, "imbobo" izovela endaweni yayo. Kodwa-ke, ngisho nalesi sakhiwo, ngezinye izikhathi ukudala ukuphazamiseka okuthile, singasetshenziselwa okuhle, isibonelo, ukudala umphumela othakazelisayo wesayithi "lokuziqoqa" lapho zonke izithiyo zalo zifakwa kancane kancane: isikhundla se-0; Kwesobunxele: 0; Okusho ukuthi, endaweni yayo yasekuqaleni.