Poziciigu Relativa - kio ĝi estas? detala priskribo

Nestumado HTML - longa procezo, strikta, sed tre kreiva. Malgraŭ tio, ke por la plimulto de personoj uzitaj en IT, retpaĝoj aranĝo ŝajnas enuiga rutino, specialistoj, kiuj havas alvokiĝon por tia kazo, ne nur kvalite plenumi la taskon, sed ankaŭ ricevas de la procezo de palpebla plezuro.

Tamen, antaŭ ol vi fariĝis sperta codificador, ĉiu novulo elspezas multan tempon studanta la diversaj instrukcioj kaj especificaciones de ambaŭ la HTML lingvo, kaj sur ĝia aliancano - CSS. Pri precize kion CSS, kio ĝi estas kaj kion "finta oreloj" permesas vin leviĝi, tiel kiel unu el liaj supro ecoj - Pozicio Relativa - hodiaŭ ni parolos.

Kio estas CSS?

CSS Mallongigo povas transskribi kaj tradukita en la rusa kiel "kaskadan stilo littukojn". Ĝi sonas sufiĉe stranga - unuflanke, ŝajnas klara, kaj vortoj, kaj aliflanke - la ĝenerala signifo ne estas tuj kaptita. Komencu kun la simpla - kun stilo. Tiu teknologio permesas vin ligi objektoj en la paĝo, iuj karakterizaĵoj pri la apero ke vi povas nur registri unufoje kaj uzi senfina nombro da fojoj.

La vorto "tablo" en la oficiala traduko aperis preskaŭ hazarde - fakte pli konvena ĉi tie estus uzi la vorton "listojn" aŭ "lertaj" Tamen la aŭtoroj de la originala traduko decidis ke la CSS aspektas pli ol listo, kaj kiu ni estas tia estas nun por provi ilin.

Fine, la vorto "Cascade". La fakto estas, ke ĉiu elemento povas havi plurajn stilojn kiuj povas esti miksitaj aŭ eĉ koincidas. En tiaj kazoj, la retumilo devas recurrir al aro de reguloj, por komponi la apero de la bloko, kiu montriĝis por pluraj stiloj, kun unu el ili, ekzemple, havas Pozicio Relativa proprieto, kaj la alia - Pozicio Absoluta. Fakte, tiaj konfliktoj ne estas tolerata, sed en grandaj projektoj kiel ekzemple konfuzo okazas tre ofte.

Do nun, kiam ĉio estas klara de la nomo, ni rigardu simpla ekzemplo. Imagu ke via retejo devus esti grandan nombron da butonoj, desegnita en certa maniero. Ili havas ecoj kiel ekzemple grandeco, ombro, opakeco, koloro. Kompreneble, vi povas specifi tiujn parametrojn, krei ĉiu butono, sed estas multe pli facile uzi CSS. Praktike, vi devas priskribi certa klaso, kiu listigas la valorojn de ĉiuj antaŭaj propraĵoj, kaj tiam, anstataŭ longan liston, la etikedo de ĉiu butono nur devas specifi la nomo de la klaso, do la retumilo mem kolorigi tiuj elementoj en la deziratan koloron kaj doni al ili taŭgan "brilo".

Kion faras la Pozicio proprieto?

Ni nun procedi rekte al la bieno Pozicio, pro kiu komencis tiun tutan artikolon. Se vi bone konas la anglan lingvon, aŭ havi bonan intuicion, do vi devus jam esti klara - tio proprieto respondecas pri la loko de la ero. Fakte, la vojo ĝi estas, sed anstataŭ difini la specifa loko, ĉi tiu propraĵo diras la retumilo kiel devas meti unu aŭ alia elemento rilate al najbaraj aŭ tra la paĝo kiel tuto.

Kio valoroj povas la Pozicio proprieto?

Nia propraĵo povas akcepti plurajn malsamajn valorojn, ekzistas nur kvin. Jen mallonga priskribo de ĉiu:

• Pozicio heredas. Tiu trajto permesas vin kopii la datumoj sur la pozicio de la elemento kiu estas gepatro. Ekzemple, se vi havas div kun specifita Pozicio Relativa do eniris en ĝin kun IMG heredas valoro ankaŭ estos metita al Parenco.
• Poziciigu Static. Tiu valoro estas donita al ĉiuj elementoj aŭtomate, krom se deklaris plu. La elementoj kapabla en pozicio kiel menciita en la kodo kaj ne estas haveblaj por diversaj "ornamoj", permesante ŝanĝi sian pozicion.
• Pozicio Absoluta. Per ĉi tiu valoro la Pozicio posedaĵo estas ofte uzita en kazoj kie ĝi estas necesa por krei "flosanta" elemento. Kun donita valoro de la proprieto elemento estas "nevidebla" por la aliaj komponantoj de la paĝo. Tio estas, ili estas aranĝitaj kvazaŭ nia absoluta elemento ne ekzistas. Li mem ĉiam esti en loko, sendepende de kiom for estas scrolled paĝo.
• Pozicio Fiksita. En multaj manieroj, tiu valoro estas simila al la antaŭa, tamen, dum la absoluta elemento estas ligita al la gepatroj, fiksita uzoj nur la koordinatojn de la supera maldekstra angulo de la retumilo ekrano, ignorante la resto de la elementoj kiuj antaŭis ĝin.
• Fine, Poziciigu Relativa. Tiu tipo valoroj permesas situado elemento relativa al la alia, kio povas utili por krei adaptativa marcaje nomita komune "kaŭĉuko". Kun ĉi tiu propraĵo, la temo estos "puŝi" la alia, sen perdi la kapablon ŝanĝi sian pozicion sur la paĝo.

Laborante kun Pozicio en malsamaj retumiloj

Ne ĉiuj retumiloj estas same kongrua. Dum plej alternativaj programoj por Interreto surfing sen Hitches perceptis valoro de Pozicio estas absolute vera, "kronike speciala» Internet Explorer konsideras la posedaĵon, depende de ĝia versio.

Ekzemple, uzante la jam "entombigitaj" la retumilo IE6, vi ne povas uzi la valoron Fiksa kaj posedos - "azeno" ili simple ignori ĝin. Tamen, malgraŭ tio, ke la sepa versio de la situacio komencis plibonigi kaj Fiksa jam procesita, por heredi amatan "retumilo elŝuti aliaj retumiloj," atingita nur en ĝia oka enkarniĝo.

La resto de la observantoj trankvile pritrakti Pozicio kun la unua versio, kun la escepto de Opero, kiu ricevis la apogon de la bienoj en ĝia 4 variadoj, eldonita meze de la 90aj jaroj.

Laborante kun Pozicio en Javascript

Fakte, la rakonto de kiel labori kun la Pozicio proprieto en Javascript estas, ni inkludis nur pro deco. Ĉar tiu propraĵo ne havas specialajn karakterojn en la titolo, vi povas uzi la JS sen ŝanĝoj, ekzemple, por agordi la div Pozicio Relativa, devus inkluzivi linion tiel: div.style.position = 'relativa'.

Kiel vi povas vidi, estas sufiĉe simpla.

Kial Pozicio Relativa meritas specialan atenton?

Dum la plejparto de la propraĵo valoroj Pozicio, milde dirite, "kverelo" en la ĉirkaŭaj elementoj, uzante la valoro "stilo pozicio: relativa", devas ĉiam memoru pri la tuta paĝo en lia aro, ĉar nepropra uzo povas forte "dekliva" la tuta enhavo de la ekrano .

Krome, ĉi tiu propraĵo nur permesas facile konverti fiksa dezajno adapta, ĉar ĝia apliko aŭtomate influas ĉiuj artikoloj. Tiam ni ankoraŭ havas tempon por konsideri la ekzemploj kaj eraroj uzas tiun valoron, kaj vi vidos lian palpebla signifo praktike.

Kiam devus vin uzas relativa situado?

Krom la kutima aranĝo de paĝoj HTML, Pozicio Relativa ofte uzita por krei diversajn interesajn efikoj. Ekzemple, se vi volas eron "venis" en paĝo aŭ, male, iom post iom iris pli tie de lia teritorio, ĝi estas precize tiu propraĵo povas helpi vin efektivigi tiun "lertaĵo".

Tiuj "trukojn" realigitajn tra Javascript estas, aŭ, se vi celas por la progresema altrudo, tra la ecoj de CSS3, kiu permesas al vi agordi la cikla ŝanĝo en la valoro de aparta variablo.

Krome, en iuj kazoj eblas krei "híbrido" valoroj Pozicio Relativa. CSS, kvankam ne samtempe permesas agordi ion kiel pozicio: absoluta relativa, sed uzante kelkajn trukojn, estas ankoraŭ ebla por atingi tiun efekton. Tiu aliro povas esti utila en kazoj kie vi devas krei ion kompleksan kiel konsileto aŭ popmuziko-supre menuo. Konsiderante la ekzemploj, ni donos al priskribon de la strukturo de tia "híbrido".

Ekzemploj de uzo de la relativa rango

Poziciigu Relativa - ĝi estas sufiĉe simpla, sed malrigida ilo kiu permesas efektivigi diversajn interesajn efikoj. Por ne malŝpari tempon kaj meti skribi senutilaj kodo ŝablono, ni prezentas plurajn parolajn algoritmoj, kiu povas ornami via retejo aŭ specifa paĝoj.

Ni komencu per "elĉerpas" linio. Supozu ke vi havas bezonon elemento kiu estos "vojaĝoj" ĉar la maldekstra rando de la ekrano kaj malrapide movi ĝin al la dekstra flanko. Por efektivigi tian "mekanismo" devus agordi pozicio: relativa; maldekstra: -100px, kie -100 - la proksimuma nombro de la pikseloj konstituante la bloko larĝa. Tiu stilo permesos vin kaŝi la unuo ekster la ekrano, metante ĝin en la "komenca pozicio". Nun vi povas uzi skripton kiu pliiĝos ĉiu malmultaj milisekundoj lasis propraĵo valoro por unueco dum ĝi ne fariĝis egala al la larĝo de la retumilo fenestro minus la larĝo de la elemento. La rezulto estas unuo kiu venas el la maldekstra rando, ruliĝis trans la ekrano kaj "parkis" en sia dekstra mano.

Alia ekzemplo permesas krei "relativaj-absoluta" elementoj. Ekzemple, Vi povas eniri absoluta interne alia, havanta Pozicio Relativa. Rezulte, ni havas "relativa" blokon kiu ne havas la grandecon al kiu la absoluta estas enskribita, nun kapablas manifesti en pozicio sendependa de la antaŭa elemento.

Tipaj eraroj uzinte Pozicio Relativa

La plej ofta eraro uzinte la Pozicio Relativa estas ke multaj retejo diseñadores forgesi pri la kapablo rezervi lokon en la unuo, kiu povas esti lokita anywhere. Ekzemple, se vi havas sufiĉe grandan, metis eksteren de la ekrano kaj kun relativa situado, en lia loko estos gapanta "truo". Tamen, eĉ ĉi tiu propraĵo estas foje kreas iujn malkomfortojn povas uzi por bono, ekzemple, krei interesan efikon de "mem-kunvenadon" de la retejo, kie ĉiuj ties blokoj estas iom post iom metita en la supra pozicio: 0; maldekstra: 0; t. e. ĝia origina loko.