Poziție relativă - ce este? Descrierea detaliată

Modul HTML este un proces lung, scrupulos, dar foarte creativ. În ciuda faptului că pentru majoritatea persoanelor angajate în domeniul IT, pagini web aspect poate părea de rutină plictisitoare, specialiștii care au o vocație pentru un astfel de caz, nu numai efectua calitativ în sarcina, dar, de asemenea, să primească de la procesul de placere tangibil.

Cu toate acestea, înainte de a deveni un designer web cu experiență, fiecare începător petrece mult timp învățând diferite instrucțiuni și specificații atât pentru limbajul HTML, cât și pentru alianța CSS. Este vorba despre asta, ce este CSS, pentru ceea ce este necesar și ceea ce "feții cu urechi" vă permite să vă ridicați și, de asemenea, despre una dintre proprietățile sale populare - Poziție Relativă - astăzi vom vorbi.

Ce este CSS?

Abrevierea CSS poate fi descifrată și tradusă în limba rusă ca "foi de stil în cascadă". Sună destul de ciudat - pe de o parte, ca și cuvintele și de înțeles, dar pe de altă parte - sensul general nu este prins niciodată. Să începem cu simplu - cu stiluri. Această tehnologie vă permite să dați obiecte pe pagină anumite caracteristici legate de aspect, care pot fi prescrise doar o singură dată, dar au fost utilizate de nenumărate ori.

Cuvântul „de masă“, în traducerea oficială a apărut aproape accidental - de fapt, mai adecvat aici ar fi de a folosi cuvântul „liste“ sau „liste“, cu toate acestea autorii traducerea originală a decis că CSS arata ca mai mult de o listă, și cine suntem astfel încât acum ei sunt judecați.

În cele din urmă, cuvântul "cascadă". Faptul este că fiecare element poate avea mai multe stiluri simultan, care pot fi amestecate sau chiar intersectate. În astfel de cazuri, browser-ul trebuie să se recurgă la un set de reguli, pentru a compune aspectul blocului, care sa dovedit a fi de mai multe stiluri, cu unul dintre ele, de exemplu, are o proprietate relativă poziție, iar cealaltă - poziția absolută. De fapt, astfel de conflicte nu pot fi tolerate, însă în proiecte mari această confuzie apare destul de des.

Deci, acum că numele este clar, să examinăm un exemplu simplu. Să presupunem că aveți un număr mare de butoane pe site-ul dvs. care sunt decorate într-un anumit mod. Ele au proprietăți precum dimensiunea, umbra, transparența, culoarea. Desigur, puteți specifica acești parametri, creând fiecare buton, dar va fi mult mai ușor de utilizat CSS. În practică, aveți nevoie pentru a descrie o anumită clasă, care enumeră valorile tuturor proprietăților de mai sus, și apoi, în loc de o listă lungă, eticheta fiecărui buton va trebui doar pentru a specifica numele clasei, apoi browser-ul se va colora aceste elemente în culoarea dorită și să le dea o buna „luciu“.

De ce am nevoie de proprietatea Poziție?

Acum, să ne mutăm direct la proprietatea Poziție, pentru care a fost conceput întregul articol. Dacă sunteți familiarizat cu limba engleză sau aveți o bună intuiție, atunci ar trebui să înțelegeți deja - această proprietate este responsabilă pentru localizarea elementului. De fapt, este adevărat, dar în loc de a defini un anumit loc, această proprietate spune browser-ului cum să plaseze exact un element în raport cu pagina vecină sau întreaga pagină în ansamblu.

Ce valori poate lua proprietatea Position?

Proprietatea noastră poate lua mai multe valori diferite, există doar cinci dintre ele. Iată o scurtă descriere a fiecăruia dintre ele:

• Poziție Moștenire. Această proprietate vă permite să copiați datele de poziție ale elementului care este părinte. De exemplu, dacă aveți div cu Poziție relativă specificată, IMG inscripționat cu valoarea moștenirii va primi și valoarea Relativ.
• Poziție statică. Această valoare este dată automat tuturor elementelor, dacă nu se specifică altfel. Elementele se încadrează în poziția așa cum sunt menționate în cod și nu sunt disponibile pentru diverse "delicatese" care le permit să-și schimbe poziția.
• Poziție Absolută. Această valoare a proprietății Position este adesea folosită în cazurile în care este necesar să se creeze un element "plutitor". Având această valoare a proprietății, elementul rămâne "invizibil" pentru restul paginii. Acestea sunt situate ca și cum elementul nostru absolut nu există deloc. El însuși va rămâne întotdeauna la locul său, indiferent cât de departe a fost derulată pagina.
• Poziție fixă. În multe privințe, această valoare este similară cu cea anterioară, cu toate acestea, în timp ce elementul absolut este legat de părinte, fix folosește doar coordonatele colțul din stânga sus al ecranului browser-ului, ignorând restul elementelor pe care l-au precedat.
• În cele din urmă, poziția relativă. Acest tip de valoare vă permite să poziționați elementul în raport cu celelalte, ceea ce poate fi util atunci când creați un marker adaptiv, numit "cauciuc", în rândul oamenilor obișnuiți. Având această proprietate, elementul va "mișca" restul, fără a-și pierde capacitatea de a-și schimba locația în pagină.

Caracteristicile de lucru cu poziția în diferite browsere

Nu toate browserele sunt la fel de compatibile. În timp ce majoritatea programelor alternative pentru navigarea pe Internet fără a fi percepute o valoare a poziției este absolut adevărată, Internet Explorer "cronică specială" consideră această proprietate în funcție de versiunea sa.

De exemplu, utilizând browserul deja îngropat IE6, nu puteți utiliza valorile fixe și moștenite - măgarul le ignoră pur și simplu. Cu toate acestea, în ciuda faptului că a șaptea versiune a situației a început să se îmbunătățească, și fixe deja prelucrate, să moștenească iubit „browser-ul pentru a descărca alte browsere,“ a ajuns doar în incarnare a opta.

Ceilalți comentatori se ocupă liniștit de Poziția de la primele versiuni, cu excepția Opera, care a obținut suport pentru această proprietate în cea de-a 4-a variantă, lansată la mijlocul anilor `90.

Lucrul cu poziția în jаvascript

De fapt, povestea despre cum să lucrăm cu proprietatea Position în jаvascript, am inclus numai de dragul proprietății. Pentru că această proprietate nu are nici caractere speciale în titlu, puteți utiliza JS fără modificări, de exemplu, pentru a seta poziția div relativă, ar trebui să includă o linie de genul: div.style.position = lsquo-relativersquo-.

După cum puteți vedea, totul este destul de simplu.

De ce poziția relativă merită o atenție deosebită?

În timp ce majoritatea valorilor de proprietate de poziție, să-l puneți blând, „scuipă“ pe elementele din jur, folosind valoarea „poziția de stil: relativă“, ar trebui să ne amintim întotdeauna despre întreaga pagină ca întreg, deoarece utilizarea incorectă poate puternic „oblic“, întregul conținut al ecranului .

În plus, numai această proprietate vă permite să transformați cu ușurință un design fix într-unul adaptabil, deoarece aplicația sa afectează automat tot conținutul paginii. Apoi, avem încă timp să luăm în considerare exemplele și erorile de utilizare a acestei valori și veți vedea valoarea ei reală în practică.

Când trebuie să utilizez poziționarea relativă?

În plus față de aspectul paginilor HTML convenționale, Pozitiv Relativ este adesea folosit pentru a crea diferite efecte interesante. De exemplu, dacă doriți ca un element să "vină" la o pagină sau, dimpotrivă, să mergeți cu ușurință pentru marginile sale, atunci această proprietate vă poate ajuta să implementați acest "feint".

Aceste „trucuri“ sunt puse în aplicare prin intermediul jаvascript este, sau, dacă scopul de impunerea progresivă, prin proprietatile CSS3, care vă permit să se adapteze modificarea ciclică a valorii unei anumite variabile.

În plus, în unele cazuri, este posibil să se creeze valori relative "pozitive". CSS, deși nu vă permite să setați simultan ceva asemănător poziției: relativă absolută, dar folosind câteva trucuri, puteți obține acest efect. Această abordare poate fi utilă în acele cazuri în care este necesar să se creeze ceva asemănător tooltip sau meniul contextual. Având în vedere exemplele, vom descrie cu siguranță structura unui astfel de "hibrid".

Exemple de utilizare a poziționării relative

Poziția Relativ este un instrument destul de simplu, dar flexibil, care vă permite să implementați multe efecte interesante. Pentru a nu pierde timp și spațiu în scrierea de coduri șablon inutile, vă vom da niște algoritmi verbali care pot decora site-ul dvs. sau paginile sale individuale.

Să începem cu linia "out-of-out". Să presupunem că aveți nevoie de un element care să "călătorească" din spatele marginii din stânga a ecranului și să se mute treptat în partea dreaptă. Pentru a implementa acest "mecanism", trebuie să setați poziția: relative-left: -100px, unde -100 este numărul aproximativ de pixeli care alcătuiesc lățimea blocului. Acest stil vă permite să ascundeți blocul în afara ecranului, setându-l la "poziția de pornire". Acum puteți utiliza un script care mărește valoarea proprietății din stânga la fiecare câteva milisecunde până devine egală cu lățimea ferestrei browserului minus lățimea elementului. Ca rezultat, obținem un bloc care apare din spatele marginii din stânga, rulat pe tot ecranul și "parcat" în partea dreaptă.

Un alt exemplu vă permite să creați elemente "relativ-absolute". De exemplu, puteți introduce un element absolut în altul care are o poziție relativă. Ca rezultat, avem un bloc "relativ" care nu are o dimensiune, în care este inscripționat un absolut, capabil să se manifeste într-o poziție care depinde de elementele care îl preced.

Erori frecvente la utilizarea poziției relative

Cea mai obișnuită greșeală atunci când folosiți poziția relativă este că mulți designeri de layout uită despre capacitatea de a rezerva spațiu pentru un bloc care poate fi oriunde. De exemplu, dacă aveți unul destul de mare, plasat în afara ecranului și având o poziționare relativă, va apărea o "gaură" în locul acestuia. Cu toate acestea, chiar și această proprietate este uneori creează anumite inconveniente pot fi folosite pentru bine, de exemplu, creând un efect interesant de „auto-asamblare“ a site-ului, în cazul în care toate blocurile sale sunt plasate treptat în poziția de sus: 0- stânga: .. 0- și anume forma sa originală loc.