Posisjon i forhold - hva er det? detaljert beskrivelse

Nesting HTML - en langvarig prosess, streng, men veldig kreativ. Til tross for det faktum at for de fleste mennesker er ansatt i IT, kan nettsidene layout virke kjedelig rutine, spesialister som har et kall for en slik sak, ikke bare kvalitativt utføre oppgaven, men også motta fra prosessen med konkrete glede.

Men før du blir en erfaren koder, tilbringer hver nykommer mye tid på å studere de ulike instrukser og spesifikasjoner av både HTML-språket, og på sin alliert - CSS. Om nøyaktig hva CSS, hva det er og hva "finte ører" kan du få opp, så vel som en av sine topp egenskaper - posisjon i forhold - i dag skal vi snakke.

Hva er CSS?

CSS Forkortelse kan bli transkribert og oversatt til russisk som "gjennomgripende stilark". Det høres ganske rart - på den ene siden, synes det klart, og ord, og på den andre - er den generelle betydningen ikke umiddelbart fanget. La oss begynne med det enkle - med stil. Denne teknologien gjør det mulig å feste objekter på siden, visse egenskaper med hensyn til utseendet at du bare kan registrere en gang og bruke et uendelig antall ganger.

Ordet "bordet" i den offisielle oversettelsen dukket opp nesten ved et uhell - faktisk mer passende her vil være å bruke ordet "lister" eller "lister", men forfatterne av den opprinnelige oversettelsen besluttet at CSS ser ut som mer enn en liste, og hvem vi er slik er nå å prøve dem.

Til slutt ordet "Cascade". Faktum er at hvert element kan ha flere former som kan blandes eller til og med overlapper hverandre. I slike tilfeller har nettleseren til å ty til et sett med regler, for å komponere utseendet på blokken, som viste seg å være flere stiler, med en av dem, for eksempel, har en posisjon i forhold eiendom, og den andre - Plassering Absolutt. Faktisk kan slike konflikter ikke bli tolerert, men i store prosjekter slik forvirring skjer ganske ofte.

Så nå, når alt er klart fra navnet, la oss se på et enkelt eksempel. La oss si at nettstedet ditt bør være et stort antall knapper, utformet på en bestemt måte. De har egenskaper som størrelse, skygge, tetthet, farge. Selvfølgelig kan du spesifisere disse parametrene, skaper hver knapp, men er mye enklere å bruke CSS. I praksis må du beskrive en viss klasse, som viser verdiene av alle de ovennevnte egenskaper, og deretter, i stedet for en lang liste, vil koden til hver knapp bare trenger å oppgi navnet på klassen, deretter selve nettleseren vil farge disse elementene i ønsket farge og gi dem en skikkelig "glans".

Hva gjør plassering eiendom?

Vi har nå gå direkte til eiendommen Position, for skyld som ble startet hele denne artikkelen. Hvis du er kjent med det engelske språket, eller har en god intuisjon, så du bør allerede være klart - denne egenskapen er ansvarlig for plasseringen av elementet. Faktisk er slik det er, men i stedet bestemme bestemt sted, forteller denne egenskapen leseren hvordan det skal plasseres en eller annen element med hensyn til tilstøtende eller over siden som helhet.

Hvilke verdier kan Position eiendom?

Vår eiendom har mange ulike verdier, er det bare fem. Her er en kort beskrivelse av hvert:

• Stilling Arv. Denne funksjonen lar deg kopiere dataene på posisjonen til elementet som er en forelder. For eksempel, hvis du har en div med en spesifisert posisjon i forhold, så inngikk den med IMG arve verdi også vil bli satt til relativ.
• Plasser Statisk. Denne verdien er gitt til alle elementer automatisk, hvis ikke angitt noe mer. De elementer som passer inn i stilling som nevnt i koden, og er ikke tilgjengelig for en rekke "enkelt", slik at for å endre sin stilling.
• Posisjon Absolutt. Ved denne verdien Position eiendommen er ganske ofte brukt i tilfeller der det er nødvendig å lage en "flytende" element. Med en gitt verdi av eiendommen elementet er "usynlig" for de andre komponentene på siden. Det vil si at de er ordnet som om vår absolutte element finnes ikke. Han selv vil alltid være på plass, uansett hvor langt blitt rullet siden.
• Stilling fast. På mange måter er denne verdi lik den foregående, men, mens det absolutte elementet er bundet til det overordnede, fast anvendelser bare koordinatene til det øvre venstre hjørne av nettleseren skjermen, ignorerer resten av elementene som gikk forut for den.
• Endelig posisjon i forhold. Denne type verdier tillater posisjoneringselement i forhold til den andre, noe som kan være nyttig for å lage en adaptiv merking heter i vanlig "gummi". Med denne egenskapen, vil posten "push" den andre, uten å miste muligheten til å endre sin posisjon på siden.

Arbeide med plassering i ulike nettlesere

Ikke alle nettlesere er like kompatible. Mens de fleste alternative programmer for Internett-surfing uten noen haker oppfattet verdi av posisjon er helt sant, "kronisk spesielle» Internet Explorer vurderer eiendommen, avhengig av versjon.

For eksempel bruker den allerede "begravet" nettleseren IE6, kan du ikke bruke verdien Faste og Arv - "esel" de bare ignorere det. Men til tross for at den syvende versjonen av situasjonen begynte å bli bedre, og Fast allerede behandlet, til Arv elskede "leseren for å laste ned andre nettlesere," nådde bare i sin åttende inkarnasjon.

Resten av observatørene rolig håndtere posisjon med den første versjonen, med unntak av Opera, som har fått støtte av eiendommene i sin 4 variasjoner, publisert i midten av 90-tallet.

Arbeide med plassering i Javascript

Faktisk, historien om hvordan å jobbe med plassering eiendom i Javascript, vi har tatt med bare for moro skyld anstendighet. Fordi denne eiendommen ikke har noen spesialtegn i tittelen, kan du bruke JS uten noen endringer, for eksempel å sette div posisjon i forhold, bør inkludere en linje som dette: div.style.position = 'slektning'.

Som du kan se, er det ganske enkelt.

Hvorfor posisjon i forhold fortjener spesiell oppmerksomhet?

Mens de fleste av eiendomsverdiene posisjon, for å si det mildt, "spyttet" på de omkringliggende elementer, ved hjelp av verdien "style position: relative", bør alltid huske om hele siden som helhet, fordi feil bruk kan sterkt "skew" hele innholdet på skjermen .

I tillegg gir denne egenskapen bare du enkelt konvertere fast utforming adaptive, fordi søknaden vil automatisk påvirke alle innholdssider. Så vi har fortsatt tid til å vurdere eksempler og feil ved hjelp av denne verdien, og du vil se sin konkrete betydning i praksis.

Når bør du bruke relative posisjonering?

I tillegg til den konvensjonelle utformingen av sidene HTML, posisjon i forhold ofte brukt til å lage en rekke interessante effekter. For eksempel, hvis du ønsker et element "kom" på en side eller, tvert imot, gradvis gikk utover sitt territorium, er det nettopp denne egenskapen kan hjelpe deg med å implementere denne "lure".

Disse "triks" er implementert gjennom Javascript er, eller, hvis du satse på den progressive påbud, gjennom egenskapene til CSS3, som lar deg justere syklisk endring i verdien av en bestemt variabel.

I tillegg, i noen tilfeller mulig å skape "hybrid" verdier posisjon i forhold. CSS, men ikke på samme tid kan du sette noe sånt som position: absolute forhold, men ved hjelp av noen triks, er det fortsatt mulig å oppnå denne effekten. Denne tilnærmingen kan være nyttig i tilfeller der du trenger for å lage noe komplisert som et verktøytips eller hurtigmenyen. Tatt i betraktning de eksempler, skal vi gi en beskrivelse av strukturen i en slik "hybrid".

Eksempler på bruk av den relative rangering

Posisjon i forhold - det er ganske enkelt, men fleksibelt verktøy som gjør det mulig å gjennomføre en rekke interessante effekter. For ikke å kaste bort tid og sted til å skrive ubrukelig kode mal, presenterer vi flere muntlige algoritmer, som kan dekorere ditt nettsted eller bestemte sider.

La oss starte med "tom" -linjen. Anta at du har et behov for et element som vil "reise" fordi venstre kant av skjermen, og sakte flytte den til høyre side. For å gjennomføre en slik "mekanisme" skal angi posisjonen: relative; venstre: -100px, hvor -100 - det omtrentlige antall av bildeelementene som utgjør blokkbredde. Denne stilen vil tillate deg å skjule enheten utsiden av skjermen, plassere den i "startposisjon". Nå kan du bruke et script som vil øke med noen millisekunder igjen eiendommens verdi per enhet, så lenge det ikke blir lik bredden av nettleservinduet minus bredden av elementet. Resultatet er en enhet som kommer ut av venstre kant, rullet over skjermen og "parkert" i sin høyre hånd.

Et annet eksempel kan du lage "relativ-absolutte" elementer. For eksempel kan du angi en absolutt inne i en annen, har posisjon i forhold. Som et resultat, har vi en "slektning" blokk som ikke har størrelsen som absolutt er innskrevet, er nå i stand til å manifestere seg i en posisjon uavhengig av forrige element.

Typiske feil når du bruker posisjon i forhold

Den vanligste feilen når du bruker posisjon i forhold er at mange web-designere glemme om muligheten til å reservere en plass i enheten, som kan plasseres hvor som helst. For eksempel, hvis du har en ganske stor, plassert utenfor skjermen og ha en relativ posisjonering, i stedet vil være et gapende "hull". Imidlertid er selv denne egenskapen noen ganger skaper visse ulemper kan brukes til gode, for eksempel, skaper en interessant effekt av "selv-montering" av området, hvor alle sine blokker er gradvis plassert i øverste posisjon: 0; venstre: 0; t. e. den opprinnelige plasseringen.