Plak ūnder - wat is it? detaillearre beskriuwing

Briedgebiet HTML - in lang proses, strang, mar hiel kreatyf. Nettsjinsteande it feit dat foar it grutste part fan de minsken wurksum yn IT, websiden opmaak kin lykje saai routine, spesjalisten dy't in ropping foar sa'n gefal, net allinnich kwalitatyf útfieren fan de opjefte, mar ek ûntfange út it proses fan taastber genot.

Mar, foardat jo wurden in betûfte Ute, eltse nijkommer bringt in soad tiid it bestudearjen fan de ferskate ynstruksjes en spesifikaasjes fan sawol de HTML taal, en op syn bûnsgenoat - CSS. Oer krekt wat CSS, wat it is en wat "feint earen" kinne jo opstean, en ek as ien fan syn top eigenskippen - Posysje Relatyf - hjoed wy sille prate.

Wat is CSS?

CSS Ofkoarting kin wurde transkribearre en oerset yn it Russysk as "cascadearjende stylblêden". It klinkt moai frjemd - oan 'e iene kant, it liket dúdlikernôch, en wurden, en oan' e oare - de algemiene betsjutting is net fuortendaliks fêstlein. Lit ús begjinne mei de simpele - mei styl. Dizze technyk kinne jo in taheaksel taheakje objekten op 'e side, bepaalde skaaimerken oangeande de ferskining dat jo kinne allinnich registrearje ien kear en brûk in ûneinige oantal kearen.

It wurd "tabel" yn de offisjele oersetting ferskynde hast tafallich - yn feite mear passende hjir soe wêze om brûk it wurd "listen" of "listen", lykwols de skriuwers fan 'e oarspronklike oersetting besletten dat de CSS liket mear as in list en wa't wy binne sa is no te besykjen se.

Ta beslút, it wurd "Cascades." It feit is dat elk elemint hawwe kinne ferskate stilen dy't kinne wurde trochinoar of sels oerlaapje. Yn sokke gefallen, de browser hat syn taflecht ta in set fan regels, om te gearstalle it oansjen fan it blok, dat blykte te wêzen ferskate stilen, mei ien fan harren, bygelyks, hat in Posysje Relatyf eigendom, en de oare - Posysje Absolute. Yn feite, sokke konflikten kinne net tolerearre, mar yn grutte projekten sa'n betizing bart hiel faak.

Sa no, doe't alles is dúdlik út 'e namme, lit we ris nei in ienfâldige foarbyld. Litte we sizze jo side moat wêze in grut tal knoppen, ûntwurpen yn in bepaalde manier. Se hawwe eigenskippen lykas grutte, skaad, dekking, kleur. Fansels kinne jo spesifisearje dizze parameters, it meitsjen fan elke knop, mar is folle makliker te brûken CSS. Yn 'e praktyk, kinne jo beskriuwe in bepaalde klasse, wat jout it wearden fan alle fan boppesteande eigenskippen, en dan, yn plak fan in lange list, de tag fan eltse knop sil allinne moatte opjaan de namme fan' e klasse, dan de blêder sels sil kleurje dizze eleminten yn de winske kleur en jou se in goede "gloss".

Wat docht de Posysje eigendom?

We no gean direkt nei it eigendom Posysje, om 'e wille fan dat waard begûn dit hiele artikel. As jo binne bekend mei de Ingelske taal, of hawwe in goede oanskôging, dan jim moatte al dúdlik wêze - dat eigendom is ferantwurdlik foar de lokaasje fan it item. Yn feite, de wei is, mar ynstee bepale de spesifike lokaasje, dat besit fertelt it blêder hoe't it moat wêze pleatst ien of oar elemint mei respekt foar oanswettende of oer de side as gehiel.

Hokker wearden kin it Posysje eigendom?

Us eigendom kin akseptearje ferskate ferskillende wearden, der binne mar fiif. Hjir stiet in koarte beskriuwing fan elk:

• Posysje ervje. Dy funksje kinne jo kopiearje de data oer de posysje fan it elemint dat is in âlder. Bygelyks, as jo in div mei in spesifisearre Posysje Relative, doe oangien mei IMG hiemen wearde ek wurdt ynsteld foar Relatyf.
• Posysje Static. Dizze wearde wurdt jûn oan alle eleminten automatysk, útsein as oanjûn gjin mear. De eleminten past yn posysje lykas neamd yn de koade en binne net beskikber foar in ferskaat oan "franje", wêrtroch't te wizigjen harren posysje.
• Posysje Absolute. Troch dizze wearde de Posysje eigenskip wurdt hiel faak brûkt yn gefallen wêr is it nedich te meitsjen fan in "driuwend" elemint. Mei in opjûne wearde fan it ûnreplik item is "ûnsichtber 'foar de oare ûnderdielen fan de side. Dat is, se binne ynrjochte as oft ús absolute elemint bestiet net. Hy sels sil altyd wêze yn plak, nettsjinsteande hoe fier is scrolled side.
• Posysje Fixed. Yn in soad manieren, dizze wearde is fergelykber mei de foarige iene, lykwols, wylst de absolute elemint is bûn oan de âlder, fêste brûkt allinnich de koördinaten fan 'e boppeste linker hoeke fan' e browser skerm, negearjen de rest fan 'e eleminten dy't foarôf gien is.
• Ta beslút, plak ūnder. Dit type wearden kinne positioning elemint relatyf oan de oare, dat kin nuttich foar it meitsjen fan in adaptieve marking neamd mien "rubber". Mei dit eigendom, it item sil "triuwe" de oare, sûnder ferliezen de mooglikheid om te wizigjen harren posysje op de side.

It wurkjen mei Posysje yn ferskillende browsers

Net alle browsers binne like kompatibel. Wylst de measte alternative programma foar ynternet Surfing sûnder hitches waarnommen wearde fan Posysje is perfoarst wier, "groanysk spesjale» Internet Explorer beskôget it pân, ôfhinklik fan syn ferzje.

Bygelyks, brûkend it al "begroeven" de browser IE6, kinne jo gjin gebrûk meitsje fan de wearde Fixed en ervje - "ezel" se gewoan negearje is. Lykwols, nettsjinsteande it feit dat de sande ferzje fan de situaasje begûn te ferbetterjen, en Fixed al ferwurke, te inherit leave "blêder om te laden oare browsers," berikt pas yn syn achtste ynkarnaasje.

De rest fan 'e waarnimmers calmly omgean Posysje mei de earste ferzje, mei útsûndering fan Opera, dat hat krige de stipe fan de eigenskippen yn har 4 fariaasjes, publisearre yn it midden fan de jierren '90.

It wurkjen mei Posysje yn Javascript

Yn feite, it ferhaal fan hoe om te wurkjen mei de Posysje besittings yn Javascript is, hawwe wy opnommen allinnich om 'e wille fan fatsoen. Omdat dit eigendom hat gjin gjin spesjale tekens yn 'e titel, kinne jo gebrûk meitsje fan de JS sûnder feroarings, bygelyks, om de div Posysje Relatyf, moatte ûnder oare in rigel as dit: div.style.position =' relative '.

Sa't jo sjen kinne, is it moai simpel.

Wêrom Posysje Relatyf fertsjinsten spesjale oandacht?

Wylst de measte eigendom wearden Posysje, te set it mildly, "spuide" op 'e omlizzende eleminten, mei help fan de wearde "style posysje: relative", moatte altyd tink oer de hiele side as gehiel, omdat ondeskundig gebrûk kin sterk "Skew" de hiele ynhâld fan it skerm .

Boppedat, dat besit allinnich kinne jo op ienfâldige konvertearje fêste design adaptieve, omdat syn tapassing sille automatysk effekt ha alle ynhâld siden. Dan wy dochs noch tiid om beskôgje de foarbylden en flaters mei help fan dizze wearde, en do silst sjen syn taastber betsjutting yn de praktyk.

Wannear moatte jo brûke relative posisjonearring?

Njonken de konvinsjonele opmaak fan siden HTML, Posysje Relative faak brûkt foar it meitsjen fan in ferskaat oan nijsgjirrige effekten. Bygelyks, as jo wolle in item "kaam" op in side of, krekt oarsom, stadichoan gie boppe syn grûngebiet, it is krekt dizze eigendom kin helpe jo de útfiering fan dit "trúk".

Dy "tricks" binne útfierd fia Javascript is, of, as jo rjochtsje foar de progressive oplizzen, troch de eigenskippen fan CSS3, dy't tastean jimme te passen it syklysk feroaring yn 'e wearde fan in bepaald fariabele.

Boppedat, yn guon gefallen mooglik te meitsjen "hybride" wearden Posysje Relative. CSS, hoewol't net tagelyk kinne jo ynstelle wat as posysje: absolute famyljelid, mar troch help fan guon parten, is it noch mooglik om te kommen ta dizze effekt. Dizze oanpak kin nuttich yn gefallen wêr jo moatte meitsjen wat kompleks as in tooltip of pop-up menu. Sjoen de foarbylden, sille wy jouwe in beskriuwing fan de struktuer fan sa'n "hybride."

Foarbylden fan gebrûk fan de relative rangoarder

Plak ūnder - it is vrij ienfâldich, mar fleksibele ark wêrmei jo te fieren in ferskaat oan nijsgjirrige effekten. Om net te fergrieme tiid en set te skriuwen nutteloos koade template, wy presintearje ferskate mûnlinge algoritmen, dy't kin decorate jo site of spesifike siden.

Litte wy begjinne mei "rinne út" line. Stel jo ha in ferlet fan in elemint dat sil "reis" omdat de lofterrâne fan it skerm en stadich ferpleats dizze nei de rjochterkant. Om de útfiering fan sa'n "meganisme" moatte set posysje: relative; lofts: -100px, dêr't -100 - de likernôch tal fen 'e piksels constituting it blok breedte. Dizze styl makket it mooglik om ferbergjen de ienheid bûten it skerm, it pleatsen dat yn it "begjinne posysje". No kinne jo gebrûk meitsje fan in skript dat sil tanimme elke pear milisekonden lofts eigendom wearde per ienheid sa lang as it net gelyk oan de breedte fan it blêder finster minus de breedte fan it elemint. It resultaat is in ienheid, dat komt út de lofter râne, rôle oer it skerm en "parkeard" yn syn rjuchterhân.

In oar foarbyld kinne jo te meitsjen "relative-absolute" eleminten. Bygelyks, kinne jo in absolút binnen in oare, hawwende Posysje Relative. Dêrtroch hawwe wy in "relative" blok dat net hawwe de grutte dêr't it absolute stiet der op skreaun, is no by steat om te manifestearjen him yn in posysje ûnôfhinklik fan de foarige elemint.

Typyske flaters by it brûken fan Posysje Relative

De meast foarkommende flater by it brûken fan de Posysje Relative is dat in soad web ûntwerpers ferjitte oer de mooglikheid om te reservearjen in plak yn de ienheid, dat kin leit oeral. Bygelyks, as jo bygelyks in frij grut, pleatst bûten fan it skerm en it hawwen fan in relative positioning, yn syn plak sil in gaping "gat". Mar, sels dat besit wurdt soms skept bepaalde inconveniences kinne brûkt wurde foar goede, bygelyks, it meitsjen fan in nijsgjirrich effekt fan "self-befeljende" fan 'e side, dêr't alle syn blokken wurde stadichoan pleatst yn de top posysje: 0; left: 0; t. e. har oarspronklike lokaasje.