Pozisyon Relative - sa ki sa li ye? deskripsyon an detay

Nidifikasyon HTML - yon pwosesis long, difisil, men trè kreyatif. Malgre lefèt ke pou majorite a nan moun ki ap travay nan IT, paj wèb layout ki ka sanble yo raz woutin, espesyalis ki gen yon vokasyon pou ka sa a, se pa sèlman kalitatif pote soti nan travay la, men tou resevwa nan men pwosesis la nan byen mèb plezi.

Sepandan, anvan ou vin yon xslt ki gen eksperyans, chak Nouvo depanse yon anpil tan etidye enstriksyon yo ak divès kalite espesifikasyon nan tou de lang nan HTML, ak sou alye li yo - CSS. Sou egzakteman sa CSS, sa li ye epi ki sa "zòrèy fent" pèmèt ou jwenn leve, osi byen ke youn nan pwopriyete tèt li - Pozisyon relatif - jodi a nou pral pale.

Ki sa ki se CSS?

ka CSS postal dwe transkri ak tradui nan Ris kòm "dra style kaskad". Li son trè etranj - sou men nan yon sèl, li sanble klè, ak mo, ak sou lòt la - siyifikasyon an jeneral se pa sa imedyatman kaptire. Ann kòmanse ak senp la - ki gen style. Teknoloji sa a pèmèt ou mete objè sou paj la, karakteristik sèten konsènan aparans la ke ou ka sèlman enskri yon fwa epi sèvi ak yon nonb infini de fwa.

Mo "tab" nan tradiksyon an ofisyèl parèt prèske pa aksidan - an reyalite pi apwopriye isit la ta dwe sèvi ak mo "lis yo" oswa "lis", sepandan otè yo nan tradiksyon orijinal la deside ke CSS la sanble plis pase yon lis, ak kiyès nou ye sa yo se kounye a eseye yo.

Finalman, pawòl Bondye a "Cascade." Reyalite a se ke chak eleman ka gen plizyè estil ki ka melanje oswa menm sipèpoze. Nan ka sa yo, navigatè a gen yo resort nan yon seri règ, yo nan lòd yo konpoze aparans nan blòk la, ki te tounen soti yo dwe plizyè Styles, ak youn nan yo, pou egzanp, te gen yon Pozisyon Relative pwopriyete, ak lòt la - Pozisyon absoli. An reyalite, konfli sa yo pa ka tolere, men nan pwojè gwo konfizyon sa yo k ap pase byen souvan.

Se konsa, koulye a, lè tout bagay se klè nan non an, se pou yo gade nan yon egzanp ki senp. Se pou nou di sit ou ta dwe gen yon gwo kantite bouton, ki fèt nan yon sèten fason. Yo gen pwopriyete tankou gwosè, lonbraj, stupidity, koulè. Natirèlman, ou ka presize sa yo paramèt, kreye chak bouton, men se pi fasil yo sèvi ak CSS. Nan pratik, ou bezwen dekri yon klas sèten, ki bay lis valè yo nan tout pwopriyete ki anwo yo, ak Lè sa a, olye pou yo yon lis long, tag a nan chak bouton pral sèlman bezwen presize non an nan klas la, Lè sa a, navigatè a poukont li ap koulè eleman sa yo nan koulè a vle epi ba yo yon bon "Interprete".

Ki sa pwopriyete a Pozisyon?

Nou kounye a ale direkteman nan Pozisyon a pwopriyete, pou dedomajman pou la nan yo ki te kòmanse atik sa a tout antye. Si ou yo abitye avèk lang angle a, oswa ou gen yon entwisyon bon, Lè sa a, ou ta dwe deja ap klè - pwopriyete sa a ki responsab pou kote adrès la nan atik la. An reyalite, wout la li se, men olye detèmine kote a espesifik, pwopriyete sa a di navigatè a li montre kouman li ta dwe mete youn oswa yon lòt eleman ki gen rapò ak adjasan oswa atravè paj la kòm yon antye.

Ki sa ki valè pwopriyete a kapab Pozisyon?

pwopriyete nou an ka aksepte plizyè valè diferan, te gen sèlman senk. Isit la se yon deskripsyon tou kout nan chak:

• Pozisyon eritye. Karakteristik sa a pèmèt ou a kapab bay kopi done yo sou pozisyon nan eleman la ki se yon paran. Pou egzanp, si ou gen yon div ak yon Relative Pozisyon espesifye, Lè sa a, antre nan l 'ak IMG valè eritye tou, y ap dwe mete nan Relative.
• Pozisyon Estatik. Sa a se valè yo bay tout eleman otomatikman, sof si deklare ankò. Eleman yo anfòm nan pozisyon kòm mansyone nan kòd la ak yo pa disponib pou yon varyete de "header", sa ki pèmèt yo chanje pozisyon yo.
• Pozisyon absoli. Lè sa a valè pwopriyete a Pozisyon byen souvan yo itilize nan ka kote li nesesè yo kreye yon "k ap flote" eleman. Ki gen yon valè yo bay nan atik la pwopriyete se "envizib" pou eleman yo lòt kote nan paj la. Sa se, yo yo ranje tankou si eleman absoli nou yo pa egziste. Li menm, li ap toujou gen nan plas, kèlkeswa ki jan lwen te defiled paj.
• Pozisyon fiks. Nan plizyè fason, valè sa a se menm jan ak yon sèl anvan an, sepandan, pandan ke se eleman nan absoli mare yo paran an, fiks itilize sèlman koòdone pou kwen siperyè agòch nan ekran an navigatè, inyore rès la nan eleman yo ki anvan li.
• Finalman, Pozisyon Relative. Sa a valè kalite pèmèt pwezante eleman relatif nan lòt la, ki kapab itil pou kreye yon adaptasyon regilye nèf semenn klas rele nan komen "kawotchou". Avèk pwopriyete sa a, atik la pral "pouse" lòt la, san yo pa pèdi kapasite nan chanje pozisyon yo sou paj la.

Travay ak Pozisyon nan navigatè diferan

Se pa tout navigatè yo gen menm konpatib. Pandan ke pwogram pi altènatif pou entènèt Navigasyon san yo pa nenpòt atach konnen valè de Pozisyon se absoliman vre, "kwonik espesyal» nan Internet Explorer konsidere pwopriyete a, tou depann de vèsyon li yo.

Pou egzanp, lè l sèvi avèk deja "antere l '" navigatè a nan IE6, ou pa ka sèvi ak valè a fiks ak eritye - "bourik" yo tou senpleman inyore li. Sepandan, malgre lefèt ke vèsyon an setyèm nan sitiyasyon an te kòmanse amelyore, ak fiks deja trete, antre al pran peyi renmen anpil "navigatè a download lòt navigatè," rive nan sèlman nan enkarnasyon wityèm li yo.

Rès la nan obsèvatè yo avèk kalm okipe Pozisyon ak vèsyon an premye, ak eksepsyon de Opera, ki te gen sipò an nan pwopriyete yo nan 4 varyasyon li yo, ki te pibliye nan mitan 90s yo-.

Travay ak Pozisyon nan JavaScript

An reyalite, istwa a nan ki jan yo travay ak pwopriyete a Pozisyon nan JavaScript, nou te enkli sèlman pou dedomajman pou la politesse. Paske pwopriyete sa a pa gen okenn karaktè espesyal nan tit la, ou ka itilize JS lan san yo pa nenpòt ki chanjman, pou egzanp, yo mete Pozisyon nan div Relative, yo ta dwe genyen ladan yo yon liy tankou sa a: div.style.position = 'relatif'.

Kòm ou ka wè, li nan trè senp.

Poukisa Pozisyon baz byenfonde relatif atansyon espesyal?

Pandan ke pi fò nan pozisyon an valè pwopriyete, mete li léjèrman, "krache" sou eleman yo ki antoure, lè l sèvi avèk valè a "pozisyon style: relatif", ta dwe toujou sonje sou paj la tout antye kòm yon antye, paske itilize move ka fòtman "krochi" sa ki tout antye nan ekran an .

Anplis de sa, pwopriyete sa a sèlman pèmèt ou fasil konvèti fiks adaptasyon konsepsyon, paske aplikasyon li yo pral otomatikman afekte tout paj kontni. Lè sa a, nou toujou gen tan yo konsidere egzanp yo ak erè lè l sèvi avèk sa a valè, epi ou pral wè siyifikasyon byen mèb li yo nan pratik.

Lè ou ta dwe itilize relatif pwezante?

Anplis de sa nan Layout a konvansyonèl nan paj HTML, Pozisyon Relative souvan itilize yo kreye yon varyete de efè ki enteresan. Pou egzanp, si ou vle yon atik "te vin" sou yon paj oswa, sou kontrè a, piti piti ale pi lwen pase teritwa li yo, li se jisteman pwopriyete sa a ka ede w aplike sa a "Trick".

Sa yo "ke trik nouvèl" yo aplike nan JavaScript se, oswa, si ou vize pou enpozisyon la pwogresis, nan pwopriyete yo nan CSS3, ki pèmèt ou ajiste chanjman nan conjoncture nan valè a nan yon varyab patikilye.

Anplis de sa, nan kèk ka posib yo kreye Relative "ibrid" valè Pozisyon. CSS, men se pa nan menm tan an pèmèt ou mete yon bagay tankou pozisyon: relatif absoli, men lè l sèvi avèk kèk ke trik nouvèl, li se toujou posib yo reyalize sa a efè. Apwòch sa a kapab itil nan ka kote ou bezwen yo kreye yon bagay konplèks tankou yon enfobul oswa meni pop-up. Lè ou konsidere egzanp yo, n ap bay yon deskripsyon nan estrikti a tout moun ki tankou yon "ibrid."

Men kèk egzanp sou lè l sèvi avèk klasman an relatif

Pozisyon Relative - li a trè senp, men zouti fleksib ki pèmèt ou aplike yon varyete de efè ki enteresan. Nan lòd pa gaspiye tan epi mete yo ekri initil modèl kòd, nou prezante plizyè algoritm nan bouch, sa ki ka dekore sit ou oswa paj espesifik.

Ann kòmanse ak "kouri soti" liy. Sipoze ou gen yon bezwen pou yon eleman ki pral "vwayaje" paske kwen an kite nan ekran an ak tou dousman deplase li nan bò dwat la. Pou aplike tankou yon "mekanis" ta dwe mete pozisyon: relatif; bò gòch: -100px, kote -100 - nimewo ki genyen nan piksèl yo Constituent lajè a blòk. Sa a style pral pèmèt ou kache inite a deyò nan ekran an, mete li nan "kòmanse pozisyon an". Koulye a, ou ka sèvi ak yon script ki ap ogmante chak milisgond kèk kite valè pwopriyete pou chak inite osi lontan ke li pa vin egal a lajè a nan fenèt navigatè a mwens lajè a nan eleman an. Rezilta a se yon inite ki soti nan kwen an gòch, woule nan tout ekran an ak "ki estasyone" nan men dwat li.

Yon lòt egzanp pèmèt ou kreye "relatif-absoli" eleman. Pou egzanp, ou ka antre nan yon absoli andedan yon lòt, li te gen Relative Pozisyon. Kòm yon rezilta, nou gen yon "relatif" blòk ki pa gen gwosè a nan ki absoli a se enskri, se kounye a kapab manifeste poukont li nan yon pozisyon endepandan de eleman nan anvan yo.

Tipik erè lè w ap itilize Relative Pozisyon

Erè ki pi komen lè w ap itilize Relative nan Pozisyon se ke Designers entènèt anpil bliye sou kapasite a rezève yon plas nan inite a, ki ka chita nenpòt kote. Pou egzanp, si ou gen yon jistis gwo, yo mete deyò nan ekran an epi ki gen yon pwezante fanmi, nan plas li pral gen yon bayman "twou". Sepandan, menm pwopriyete sa a se pafwa kreye sèten enkonvenyan kapab itilize pou bon, pou egzanp, kreye yon efè enteresan nan "oto-rasanble" nan sit la, kote tout nan blòk li yo ki ap piti piti mete nan yon pozisyon nan tèt mwen: 0; bò gòch: 0; t. e. kote orijinal li.