Posizio erlatiboa - zer da? deskribapen zehatza

Habia HTML - prozesu luze bat, zorrotz, baina oso sormen. Izan ere, landun gehienak, web orrien diseinua aspergarria errutina iruditu arren, espezialistak diren Kasu bokazioa dute, ez bakarrik kualitatiboki aurrera eramateko zeregina, baina baita plazer hautemangarria prozesua jasotzeko.

Hala ere, esperientzia Kodetzaile bihurtu aurretik, Wazemank bakoitzak hainbat argibide eta HTML hizkuntzaren bi zehaztapenak ikasten denbora asko pasatzen du, eta bere aliatu on - CSS. zehazki buruz zer CSS, posizio erlatiboa - - zer den eta zer "feint belarri" ahalbidetzen jaiki duzu, bai eta bere propietate goi bat gaur hitz egingo dugu.

Zer da CSS?

CSS laburdura transkribatu daiteke eta Russian itzulita "Kaskadako estilo-orriak" gisa. Nahiko arraroa soinuak - alde batetik, argi dirudi, eta hitzak, eta bestetik - esanahi orokorrean ez da berehala harrapatu. Dezagun simple - estilo. Teknologia honek aukera ematen du itxura hori baino ezin duzu behin erregistratu eta zenbat aldiz infinitua bat erabili buruz orriko objektuak, ezaugarri jakin batzuk erantsi duzu.

"Taula" hitza itzulpen ofiziala agertu ia nahigabe - Izan egokiagoa hemen hitza "zerrendak" edo "zerrendak" erabiltzea izango litzateke, hala ere, jatorrizko itzulpena egileek erabaki CSS dela zerrenda bat baino gehiago itxura du, eta nor garen hala nola, orain, horiek saiatzeko.

Azkenik, hitza "Cascade". Izan ere, elementu bakoitzak hainbat estilo nahasten daitezke, edo are bata bestearen gainean izan dezake. Kargua Absolutua - Kasu horietan, nabigatzailea arau-multzo bat jotzea, ordena blokea, aktibatuta hainbat estilo izango da, horietako bat, adibidez, Kargua jabetza erlatiboa dauka itxura, eta bestea konposatzen du. Izan ere, gatazka horrela ezin da onartu, baina proiektu handietan, hala nola, nahasmena gertatzen da sarritan.

Beraz, orain, dena izen batetik argi dago, dezagun adibide sinple bat. Demagun zure gune botoiak ugari, modu jakin batean diseinatua izan behar du. hala nola, tamaina, itzala, opakotasuna, kolorea ezaugarri dituzte. Jakina, parametro hauek zehaztu dezakezu, botoi bakoitzak sortzen du, baina askoz errazagoa CSS erabiltzeko. Praktikan, zenbait klase bat, eta hori gainetik propietate guztien balioak zerrendatzen deskribatzeko, eta, ondoren, ordez zerrenda luzea egin behar duzu, botoi bakoitzaren etiketa bakarrik izango class-izena zehaztu behar, orduan nabigatzailean bertan nahi den kolorea elementu horiek margotu egingo eta emateko egoki bat "distira".

Zer da jabetza ez?

orain, aurrera jarraitu dugu, zuzenean jabetza posizioa, mesedetan horietatik abiatuko da artikulu hau osorik egiteko. zara ingelesez ezagutzen baduzu, edo intuizio ona izan, orduan dagoeneko izan behar duzu argi - Jabetza hori da elementua kokalekua ardura. Izan ere, bidea da, baina ordez kokapen jakin zehazteko, jabetza hori nabigatzailea nola jarri behar da, bat edo beste elementu errespetuz esaten aldameneko edo orriaren osotasunean zehar.

Zer balioak ezin Kargua jabetza?

Gure jabetza zenbait balio desberdinak onartu ahal, badira bost bakarrik. Hemen bakoitzaren azalpen labur bat da:

• Kargua oinordetzan. Ezaugarri honi esker elementua duten guraso bat da jarrerari buruzko datuak kopiatzeko duzu. Adibidez, div bat baduzu bat zehaztu posizio erlatiboa batera, orduan sartuko da IMG heretatzen balio ere izan daitezke erlatiboa ezarriko da jokatzen.
• Jarri estatikoa. Balio hau automatikoki elementu guztiak eman, adierazi ezean edozein gehiago. elementuen posizio sartzen aipatutako kodean bezala, eta ez daude eskuragarri "frills" ezberdinen arabera, beren jarrera aldatzeko aukera ematen du.
• Kargua absolutua. balio hau By Kargua jabetza da sarritan kasuetan beharrezkoa da bat "flotatzen" elementu sortzeko erabiltzen da. Jabetza elementua balioa jakin batekin dago "ikusezina" orrialdearen beste osagai da. Hau da, ez dira gure absolutua elementu ez bada existitzen den bezala antolatuta. beti izango zuen bere burua leku izan, noraino dira korritutako orri kontuan hartu gabe.
• Posizio finkoa. Modu askotan, balio hau aurrekoaren antzekoa da, hala ere, absolutua elementu da gurasoa loturik, berriz, finkoa erabilerak nabigatzaileak pantailaren goiko ezkerreko izkinan koordenadak bakarra, aurreko elementu gainerako jaramonik.
• Azkenik, posizio erlatiboa. motako balioak honi esker kokatzea elementu bestea, zein moldatzaile bat sortzeko erabiltzen markaketa "goma" komunean deitu daiteke erlatiboa. Jabetza honekin, elementua izango "bultza" bestea, orriko beren jarrera aldatzeko gaitasuna galdu gabe.

Nabigatzaile desberdinetan posizioa lan egitea

Not nabigatzaile guztiak berdin bateragarriak dira. Internet surf programak alternatiba gehien hautematen Kargua balioa edozein hitches gabe erabat egia bitartean, "kroniko bereziak» Internet Explorer jabetza iritziz, bere bertsioaren arabera.

"Asto" ez ikusi besterik ez dute - Esate baterako, dagoeneko "lurperatuta" nabigatzaileak IE6 erabilita, ezin balioa finkoa eta oinordetzan erabili. Hala ere, Izan ere, zazpigarren egoera bertsio hori hobetu zen, eta finkoa dagoeneko prozesatu, maitea Heredatu den arren "nabigatzaileak beste nabigatzaile deskargatzeko," iritsi da bere Enkarnazio zortzigarren bakarrik.

begirale Gainerako lasai kudeatzeko posizioa lehen bertsioarekin, Opera ezik, zein propietate laguntza du lortu bere 4 aldakuntzak ere, 90eko hamarkadaren erdialdean argitaratu gabe.

Javascript posizioa lan egitea

Izan ere, nola Kargua Javascript jabetza batekin lan istorioa da, dugu decency mesedetan bakarrik sartzen dute. Zeren eta jabetza hori ez dio izenburuan karaktere bereziak edozein, JS erabili ahal izango duzu inolako aldaketarik gabe, adibidez, div posizioa erlatiboa ezartzeko, hau bezalako lerro bat jaso behar ditu: div.style.position = 'erlatiboa'.

Ikusten duzun bezala, nahiko erraza da.

Zergatik posizio erlatiboa meritu arreta berezia?

Jabetza balioak posizioa izan da, jarri mildly bitartean, "spat" inguruko elementu, balio erabilita "style posizioa: erlatiboa", beti buruz osotasunean orri osoari gogoratu, bidegabeko erabilera baitaiteke biziki "Okertu" pantailan eduki osoa .

Horrez gain, jabetza hori bakarrik ematen du erraz bihurtzeko diseinua finko moldatzaile, bere aplikazioa automatikoki eragingo baitu edukiaren orri guztiak. Orduan oraindik ez dugu adibide eta akatsak balio hau erabiliz kontuan hartu denbora, eta bere praktikan esangura hautemangarria ikusiko duzu.

Noiz kokatzea erlatiboa erabili behar duzu?

konbentzionalak orriek HTML diseinua gain, posizio erlatiboa askotan efektu interesgarri barietate bat sortzeko erabiltzen da. Adibidez, nahi duzun elementua bada "etorri" orri batean edo, aitzitik, pixkanaka bere lurraldean haratago joan zen, hain zuzen ere, jabetza hori "iruzur" hau ezartzeko laguntzeko.

"Trikimailuak" Hauek Javascript bidez gauzatzen dira, edo, inposizio progresiboa helburua badituzu, CSS3 propietate, ahalbidetuko aldagai jakin baten balioa ere ziklikoa aldaketa doitzeko aukera bidez.

Gainera, kasu batzuetan posible ere sortzeko "hibrido" balio posizio erlatiboa. CSS, aldi ahalbidetzen posizio antzeko zerbait ezartzeko aukera baina ez at: erlatiboa absolutua, baina trikimailu batzuk erabiliz, oraindik ere posible da efektu hori lortzeko. Planteamendu honek kasuetan erabilgarria izan daiteke zerbait bezala konplexuak sortu behar duzu argibide gisa edo pop-up menua. adibide kontuan hartuta, hala nola egitura azalpen bat emango diogu "hibrido".

Ranking erlatiboa erabiliz Adibideak

Posizio erlatiboa - nahiko erraza da, baina tresna malgua ahalbidetzen duen efektu interesgarri barietate bat ezartzeko duzu. Ordena ez denbora alferrik galdu eta jar alferrikakoa kodea template idatzi ahal izateko, ahozko hainbat algoritmo, zein da zure gune edo orri zehatzak apaintzen aurkezten dugu.

Dezagun "agortu" lerro batekin. Demagun elementu bat izango dela "bidaia" utzi pantailaren ertzean delako eta poliki mugitu eskuinaldean beharra duzu. hala nola, "mekanismo" bat posizio ezarri behar ezartzeko: erlatiboa; ezkerretik: -100px, non -100 - pixel bloke zabalera osatzen kopuru gutxi gorabeherako. Estilo hau pantailaren kanpoko unitate ezkutatzeko duzunean, jarriz "posizioa" aukera emango du. Orain gidoi bat gutxi milisegundotan guztietan geratzen jabetza aleko balioa, betiere, ez du bihurtu nabigatzaileak leihoaren zabalera ken elementu zabalera berdina handitu egingo erabili ahal izango duzu. Emaitza unitate bat dela ezkerreko ertzetik ateratzen, pantailan zehar desegin eta "aparkatuta" bere eskuineko eskuan dago.

Beste adibide bat ematen die "erlatiboa-absolutua" elementu sortu nahi duzun. Adibidez, absolutua sar dezakezu beste baten barruan, posizio erlatiboa izatea. Ondorioz, a "erlatiboa" ez duen tamainaren zein absolutua inskribatuta dago bloke ditugu, berez manifestua posizio aurreko elementu independenteak gai da orain.

Ereduzko akatsak posizio erlatiboa erabiltzean

The akats ohikoena denean posizio erlatiboa erabiliz da web diseinatzaile asko leku bat erreserbatzeko Unitatean gaitasuna, zein lekutan kokatzen daiteke ahaztu. Adibidez, nahiko handi bat, pantailaren eta kokatzea erlatiboa izatea kanpo jartzen baduzu, bere tokian gaping "zulo" bat izango da. Hala ere, nahiz eta jabetza hori da batzuetan sortzen jakin eragozpenak ona erabil daiteke, adibidez, "auto-muntaia" gunean, non bere bloke guztiak pixkanaka goiko posizioan jartzen diren eragina interesgarri bat sortzeko: 0; ezkerretik: 0; t. e. haren jatorrian.