Position i forhold - hvad er det? detaljeret beskrivelse

Nesting HTML - en langvarig proces, stringent, men meget kreativ. På trods af, at der for de fleste mennesker er beskæftiget i it, kan websider layout virke kedeligt rutine, specialister, der har et kald til et sådant tilfælde ikke blot kvalitativt udføre opgaven, men også modtage fra processen med håndgribelige fornøjelse.

Men før du bliver en erfaren koder, hver nytilkommen bruger en masse tid på at studere de forskellige anvisninger og specifikationer af både HTML-sproget, og på dens allierede - CSS. Om præcis hvad CSS, hvad det er, og hvad "finte ører" giver dig mulighed for at komme op, samt en af sine vigtigste egenskaber - Position Relativ - i dag vil vi tale.

Hvad er CSS?

CSS Forkortelse kan transskriberet og oversat til russisk som "cascading style sheets". Det lyder temmelig mærkeligt - på den ene side, synes det klart, og ord, og på den anden - er den generelle betydning ikke umiddelbart fanget. Lad os starte med den simple - med stil. Denne teknologi gør det muligt at fastgøre objekter på siden, bestemte karakteristika vedrørende det indtryk, at du kun kan registrere én gang og bruge et uendeligt antal gange.

Ordet "bord" i den officielle oversættelse dukkede næsten ved et uheld - faktisk mere passende her ville være at bruge ordet "lister" eller "lister", men forfatterne til den oprindelige oversættelse besluttet, at CSS ligner mere end en liste, og hvem vi er sådan er nu at prøve dem.

Endelig er ordet "Cascade". Faktum er, at hvert element kan have flere stilarter, der kan blandes eller endda overlapper. I sådanne tilfælde browseren har at ty til et sæt regler, med henblik på at komponere udseendet af blokken, som viste sig at være flere stilarter, med en af dem, for eksempel, har en position i forhold egenskab, og den anden - Position Absolutte. Faktisk kan sådanne konflikter ikke tolereres, men i store projekter såsom forvirring sker ret ofte.

Så nu, når alt er klart fra navnet, lad os se på et simpelt eksempel. Lad os sige dit websted skal være et stort antal knapper, der er designet på en bestemt måde. De har egenskaber såsom størrelse, skygge, opacitet, farve. Selvfølgelig kan du angive disse parametre, skaber hver knap, men er meget lettere at bruge CSS. I praksis skal du beskrive en bestemt klasse, som opregner de værdier af alle de ovennævnte egenskaber, og derefter, i stedet for en lang liste, vil tag af hver knap kun behøver at angive navnet på klassen, så browseren selv vil farve disse elementer i den ønskede farve og give dem en ordentlig "glans".

Hvad gør Position ejendom?

Vi har nu gå direkte til ejendommen holdning, af hensyn til som blev startet hele denne artikel. Hvis du er fortrolig med det engelske sprog, eller har en god intuition, så skal du allerede være klar - denne egenskab er ansvarlig for placeringen af elementet. Faktisk er den måde, det er, men i stedet bestemme den specifikke placering, denne egenskab fortæller browseren hvordan den skal placeres et eller andet element i forhold til tilstødende eller på tværs af siden som helhed.

Hvilke værdier kan positionen ejendom?

Vores ejendom kan acceptere flere forskellige værdier, er der kun fem. Her er en kort beskrivelse af hver:

• Position Arv. Denne funktion gør det muligt at kopiere dataene på positionen af det element, der er en forælder. For eksempel, hvis du har en div med en specificeret position i forhold, så indgik det med IMG arve værdi også vil blive sat til Relativ.
• Placer Static. Denne værdi er givet til alle elementer automatisk, medmindre andet er angivet mere. Elementerne passer ind position som nævnt i koden og er ikke tilgængelige for en række "dikkedarer", gør det muligt at ændre deres position.
• Stilling Absolutte. Ved denne værdi Position ejendom er ganske ofte anvendes i tilfælde, hvor det er nødvendigt at skabe en "flydende" element. Med en given værdi af ejendommen elementet er "usynlige" for de andre komponenter i siden. Det vil sige, de er anbragt, som om vores absolutte element ikke eksisterer. Han selv vil altid være på plads, uanset hvor langt blevet rullet side.
• Position Fast. På mange måder er denne værdi svarer til den foregående, men mens den absolutte element er bundet til den forælder, faste anvendelser kun koordinaterne for det øverste venstre hjørne af browseren skærmen, ignorerer resten af de elementer, der gik forud.
• Endelig position i forhold. Denne type værdier muliggør positioneringselementet i forhold til den anden, hvilket kan være nyttigt for at skabe en adaptiv mærkning kaldes fælles "gummi". Med denne egenskab, vil posten "skubbe" den anden, uden at miste evnen til at ændre deres placering på siden.

Arbejde med holdning i forskellige browsere

Ikke alle browsere er lige kompatible. Mens de fleste alternative programmer til at surfe på internettet uden nogen uforudsete hændelser opfattede værdi af position er helt rigtigt, "kronisk særlige» Internet Explorer anser ejendommen, afhængigt af dens version.

For eksempel ved hjælp af allerede "begravet" browseren IE6, kan du ikke bruge værdien Fast og arve - "æsel" de bare ignorere det. Men trods det faktum, at den syvende udgave af situationen begyndte at forbedre, og Fixed allerede behandlet, for at arve elskede "browser til at hente andre browsere," nåede kun i sin ottende inkarnation.

Resten af observatørerne roligt håndtere holdning med den første version, med undtagelse af operaen, som har fået støtte af ejendommene i sine 4 varianter, der blev offentliggjort i midten af 90'erne.

Arbejde med holdning i Javascript

Faktisk er historien om, hvordan man arbejder med den holdning ejendom i Javascript er, vi har medtaget kun af hensyn til anstændighed. Fordi denne ejendom ikke har nogen særlige tegn i titlen, kan du bruge JS uden nogen ændringer, for eksempel, at indstille div position i forhold, bør omfatte en linje som denne: div.style.position = 'relativ'.

Som du kan se, er det ret simpelt.

Hvorfor position i forhold fortjener særlig opmærksomhed?

Mens det meste af ejendomsværdierne Position, for at sige det mildt, "spyttede" på de omgivende elementer, ved hjælp af værdien "stil position: relative", bør altid huske om hele siden som helhed, fordi forkert brug kan stærkt "skævt" hele indholdet af skærmen .

Hertil kommer, at denne ejendom kun tillader dig nemt konvertere fast design adaptive, fordi dens anvendelse automatisk vil påvirke alle indholdssider. Så vi har stadig tid til at overveje de eksempler og fejl ved hjælp af denne værdi, og du vil se sin håndgribelige betydning i praksis.

Hvornår skal du bruge relativ positionering?

Ud over den konventionelle layout af sider HTML, Position Relativ ofte bruges til at skabe en række interessante effekter. For eksempel, hvis du ønsker et element "kom" på en side eller tværtimod, efterhånden gik ud over dens territorium, er det netop denne egenskab kan hjælpe dig med at implementere denne "trick".

Disse "tricks" gennemføres via Javascript er, eller, hvis du sigter efter den progressive indførelse, gennem egenskaber CSS3, som giver dig mulighed for at justere den cykliske ændringer i værdien af en bestemt variabel.

Hertil kommer, at i nogle tilfælde muligt at skabe "hybrid" værdier position i forhold. CSS, men ikke på samme tid kan du indstille noget som position: absolut relativ, men ved hjælp af nogle tricks, er det stadig muligt at opnå denne effekt. Denne fremgangsmåde kan være nyttig i tilfælde, hvor du har brug for at skabe noget kompleks som et værktøjstip eller pop-op-menuen. I betragtning af de eksempler, vil vi give en beskrivelse af strukturen af en sådan "hybrid".

Eksempler på anvendelse af den relative placering

Position i forhold - det er ret simpelt, men fleksibelt værktøj, der giver dig mulighed for at gennemføre en lang række interessante effekter. For ikke at spilde tid og sted til at skrive ubrugelig kode skabelon, præsenterer vi en række mundtlige algoritmer, som kan dekorere dit websted eller bestemte sider.

Lad os starte med "løbe ud" linje. Antag, at du har et behov for et element, der vil "rejse", fordi den venstre kant af skærmen og langsomt flytte den til højre side. At gennemføre en sådan "mekanisme" bør sætte position: relative; venstre: -100px, hvor -100 - det omtrentlige antal af pixel, der udgør blokken bredde. Denne stil vil give dig mulighed for at skjule enheden uden for skærmen, hvilket placerer den i "udgangsposition". Nu kan du bruge et script, der vil øge hvert par millisekunder tilbage ejendomsværdi pr, så længe det ikke bliver lig med bredden af browservinduet minus bredden af elementet. Resultatet er en enhed, der kommer ud af den venstre kant, rullede over skærmen og "parkeres" i sin højre hånd.

Et andet eksempel kan du oprette "relativ-absolutte" elementer. For eksempel kan du indtaste en absolut inde i en anden, der har position i forhold. Som et resultat har vi en "relativ" blok, der ikke har størrelsen til hvilken den absolutte er indskrevet, er nu i stand til at manifestere sig i en position er uafhængig af det forrige element.

Typiske fejl, når bruger position i forhold

Den mest almindelige fejl ved brug af position i forhold er, at mange web-designere glemme alt om muligheden for at reservere en plads i enheden, som kan placeres hvor som helst. For eksempel, hvis du har en temmelig stor, placeret uden for skærmen, og som har en relativ positionering, i stedet vil være et gabende "hul". Imidlertid er selv denne egenskab til tider skaber visse gener kan bruges til gode, for eksempel, hvilket skaber en interessant effekt af "self-samling" af sitet, hvor alle dets blokke er efterhånden placeret i den øverste position: 0; venstre: 0; t. e. sin oprindelige placering.