Positiona CSS ya ji hêla Just X, Y ve ye
Positionên CSS-ê pir dirêj bûye beşek giring ya malpera çêkirina malperê. Heta bi riya nûçûna nûçeyên CSS-yê yên wekî Flexbox û CSS-grid-nû, bi pozîsyona hêsantir di kûreyek sêwirînerê sêwirîner a web de girîng e.
Dema ku pîşesaziya CSS bikar bînin, yekem tiştê ku hûn hewce ne ku hûn hewce bike ku ji bo helwesta CSS ve ava bikin ku geroka gerbêjî heke hûn diçin ku hûn têbigirin ku pozgehek temamî û pozîsyona ji bo nimûneyeke hanê bikar bînin. Hûn jî divê hewceyê di navbera van herdu taybetmendiyên cihan de zelal bibînin.
Dema ku temam û hevpeyman in du taybetmendiyên pîşesaziyê CSS in, pir caran di çarçoveya malperê de tê bikaranîn, bi rastî çar dewletan li ser xanî helwesta hene:
- static
- temam
- meriv
- vekirî
Static ji bo her rûpelê li ser rûpelê malpera default default. Heke hûn pozîsyonek nimûne nakeve, ew dê static be. Ev tê wateyê ku dê li ser ku li belgeya HTML e û çawa di hundirê pelê normal de nîşan bide.
Heke hûn hiqûqên pêdivî yên wekî top û çep an elementek ku xwedî helwestek statak heye, ew rêbaz dê bêne barkirin û element wê bimîne ku li belge belgeya normal ya xuya dibe. Bi rastiyê, hûn hema hema, heke hema, divê hewceyê hêmanek li ser helwesta statîkek li CSS-ê ji ber ku nirxa nirxî ye.
Paqijkirina CSS ya Absolute
Helwesta Absolute dikare dibe ku pispora herî CSS ya ku fêm bikin. Hûn bi taybetmendiya vê CSS'yê dest pê bikin:
helwesta: temamî;Ev nirxê gerok pêşkêş dike ku her tiştek bikişîne divê ji dora normal ya belgeyê ve bête kirin û ji bila li cihê rûpela li ser peldanka rast tê veşartin. Ev tête hesab kirin ku li ser bingeha pêşniyarê nîjnebûyî ya bavê nermî ye.
Ji ber ku hêkek yekem helwesta dakêşî ji dermana normal-ê derxistin, ew ê bandor bike ka ewên ku pêşî an piştî wê di HTML-ê de rûpelê malpera xwe têne avêtin.
Wekî nimûne - mînakek we dabeşkirineke ku bi karûbarê niştimanî ve tê bikaranîn (em ê wê nirxek zûtirîn binêrin), û di hundirê wê de parçeyek we bi parçeyek ku we dixwest ku hûn 50 pîklên ji binê perçeyê dor bikin, hûn ji bo vê paragrafê bi rêjeya 50 -xx li ser milê "top" li ser vê yekê, nirxa nirxa "absolute" nabe.
helwesta: temamî; top: 50px;Ev yekem elementek helwesta wê paşê herdem ji 50% pîklên ji hêla dabeşkirina dabeşkirî ve tête dabeşandin nîşan dide - tu tiştek din di pêvajoya normal de bêtir nîşan dide. Elementa we ya "temamî" helwesta yekgirtî ye ku wekî vê çarçoveya wê û tête ku hûn bikar bînin binirxînin ku ew e.
Li hejmarên çar cihan ên ku hûn bikar bînin hene:
- lûtik
- rast
- erd
- çep
Hûn dikarin li jêr û jêrîn bikar bînin (ji ber ku hêman dikare bi hemî van van nirxan nirxandin) yan jî rast û çep.
Heke ku hêja yekem helwesta absolute ye, lê li wir nen-staticly pîvanên helwesta ne, hingê dê wê li hemberî elementa laşê hebe, ku ji hêla asta herî bilind ya rûpelê ye.
Positionasyonê ya Têkilî
Me berê ji bo pozîsyona niştecîhê behsa, da ku em niha li milkê binêrin.
Positionên pêwendiyên pêwendiyê heman çar xuyaneyên xemgîniyê wekî pispora teva tevahî, lê ji bila bingeha helwesta li seranserê nest-nexwestî ya bavêjî ya herî nêzîk-an-bavê, ew dest pê dike ku ew hêja dê di binavê normal.
Ji bo nimûne, eger hûn sê rûpelê li ser malpera we hene, û sêyemîn xwedî "şêweya nermalîf" li ser wê de ye, wê helwesta wê dê li ser bingeha wê ya bingehîn be.
Para 1.
Para 2.
Para 3.
Di nimûneya jorîn de, paragrafa sêyemîn dê 2em ji alîyê çepê ya konserorê ve girêdayî ye, lê hê jî dê du paragraphên yekem li jêr be. Ew di belavkirina normalê de belgeyê bimîne, û tenê hûrbûr be. Heke hûn li wê derê veguherînin: absolute; tiştek jêrîn wê li ser jorîn nîşan bide, ji ber ku ew di dora normal de bê belgeyê nabe.
Elebatên li ser malpera gelek caran bikar tînin ku ji bo nirxa wateya damezirandin: Bi nirxa nirxa nayê destnîşankirin, ku wateya wê elementê bi awayekî ku ew di belavbûna normal de xuya dibe. Ev yek bi tenê pêk tê ku ew hêla wekî wekî çarçoveya dijî dijî kîjan hêmanên din dikarin bê cihêrin. Ji bo nimûne, heger hûn malpera xwe ya tevahiya malperê bi nirxa çîn a "konser" (ku di modela malperê de pir gelemperî ye), ku dabeş dikare dikare cihekî xizmetê be, da ku tiştek hundirê wê bikar bînin wekî wekî helwesta pozîsyonê.
Çi Derbarê Positioning Positioning?
Positiona jimartî ya pir girîng e ku wekî pîvana absolute. Helwesta hêla hewayê wekî heman rengî wekî modela absolbûr tête hesab kirin, lê elementên paşvekirî paşê di wê deverê de hema têne hesab kirin . Her tiştek din li ser rûpelê dê wê elementê berê binivîse.
Ji bo nirxên vê taybetiyê bikar bînin, hûn ê ava bikin:
helwestHûn di hişê xwe de bimînin, gava ku hûn li cîhê li ser malpera xwe bicîh bikin, ew dê di wê cihê çap bike dema ku rûpelê Webê ve hatiye nivîsandin. Ji bo nimûne, heger hûn elementê li ser rûpela xwe ya rast e, ew ê li seranserê her rûpelê ya çapkirî - ji ber ku ew bi rûpeleke rûpelê vekirî ye. Hûn dikarin celebên medyayê bikar bînin ku guhertina pirtûkên ku printedên hêmanên xweras diyar dikin nîşan bikin:
@screen @media {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Gotara rastîn ji Jennifer Krynin. Ji aliyê Jeremy Girard ve di 1/7/16 de hate guherandin.