Poziția CSS: exemple

Artiștii de novice de machiaj întâmpină adesea dificultăți în poziționarea elementelor prin CSS

Specificitatea construcției fluxului de documente

Poziționați CSS funcționează cu fluxul unei pagini web. Cum să înțelegeți acest lucru? În mod prestabilit, toate elementele paginii sunt aranjate în ordinea în care le-ați creat în HTML-marcare. Dacă eticheta antet situat deasupra etichetei subsol, apoi pe pagina va fi afișată mai sus. Și invers, dacă dintr-un anumit motiv decideți să plasați subsol în html deasupra "heder", "subsolul" paginii va fi afișat deasupra "antetului". În acest caz, elementele blocului ocupă toată lățimea disponibilă pentru ele. Cele mai mici, la rândul lor, sunt plasate într-o singură linie, până când ocupă totul, iar apoi încep să fie transferate la una nouă. Această comandă se numește "flux de documente".

Pentru a schimba comportamentul fluxului, utilizați proprietatea Pozițieîn CSS. De asemenea, poate varia în funcție de proprietate float, dar nu o vom lua în considerare. Cu ajutorul poziționării, puteți forța elementul să "cadă" dintr-un fir normal, după care acesta va începe să se comporte într-un mod nou. Cum exact - depinde de valoarea folosită a proprietății.

Poziția CSS: statică

Poziție: statică, sau poziționarea statică, este valoarea implicită pentru toate blocurile html, pe care l-ați creat. În condiții normale, nu trebuie să vă ocupați de aceasta. Dacă nu este specificată nici o poziționare pentru niciun bloc sau rând, atunci are o valoare statică. Pe pagină, o astfel de componentă este afișată în funcție de flux. Dacă specificați proprietăți pentru aceasta dreapta / stânga sau sus / jos, nu va exista nici un efect.

Poziția CSS: fixă

Atunci când utilizați această proprietate, elementul se află în afara fluxului normal al documentului. Acum, poziția sa este calculată în raport cu fereastra browserului, indiferent de modul în care sunt plasate celelalte componente. Cu alte cuvinte, blocul cu poziție: fix mergeți în partea de sus a paginii, apăsați până la marginea ferestrei browserului și alte elemente își vor lua locul în conformitate cu fluxul.

Caracteristica principală a elementelor poziționate fix este că pot suprapune alte blocuri și linii de pagină. Când defilați blocul cu poziția: fix ar părea să rămână fără să dispară de pe ecran. Acest lucru este util dacă trebuie să faceți o navigație sau un element similar pe care trebuie să îl aibă întotdeauna un utilizator. Poziționarea fixă ​​se aplică și în cazul în care doriți să plasați un buton de derulare rapidă într-o anumită parte a paginii.

Poziția CSS: relativă

Utilizarea acestei proprietăți se numește poziționare relativă. Dacă setați proprietatea Element la Poziție: relativă, el va rămâne în locul lui. La prima vedere, nu se va întâmpla nimic special, dar totul se va schimba dacă folosiți în plus proprietățile dreapta / stânga și sus / jos. Cu ajutorul lor, puteți controla mișcarea unei componente în raport cu locația acesteia. În locul în care blocul sau linia a fost înainte, va exista un spațiu gol - alte elemente vor rămâne în pozițiile lor, fără a acorda atenție scaunului vacant.

Când mutați componenta nu afectează poziția părților înconjurătoare ale paginii. Ei vor rămâne în locurile lor, deși un bloc relativ poziționat îi poate bloca. Proprietatea însăși este rar utilizată. De obicei se utilizează în combinație cu următoarea opțiune.

Poziționarea absolută

Una dintre opțiunile cele mai interesante și cele mai frecvent utilizate. Când utilizați proprietatea Pozițiecu valoare absolut Poziția componentei paginii va fi calculată în raport cu fereastra browserului. alte elementele (care nu sunt absolut poziționate) par să "uite" de existența unui "coleg" cu Poziție: absolut și ia loc în râu. Se pare că totul este exact același lucru ca în cazul poziției: fix, Dar există și diferențe serioase.

În primul rând, poziția elementului poate fi controlată în mod liber - utilizează proprietăți sus / dreapta / jos / stânga. De exemplu, dacă specificați o valoare fund: 100px, blocul "împinge" din partea de jos a paginii la 100 de pixeli. În al doilea rând, atunci când defilați, componenta "absolută" va rămâne în locul său, în loc să se deplaseze cu pagina.

Interacțiunea blocurilor absolute cu elementele părinte

Puteți obține un control și mai precis asupra componentei absolut poziționate. Pentru a face acest lucru, trebuie să setați părintele său la proprietatea Poziție: fix, relativ sau absolută.

Să luăm în considerare un exemplu. Ai div cu clasa relativă-div, în interiorul căruia se află div cu clasa absolut-div. Setați proprietatea Poziție la blocul intern: absolut. Este imediat "zboară" din flux și este undeva deasupra, deoarece acum locația sa este calculată în raport cu fereastra browserului. Acum dăm blocul cu clasa relativă-div Poziționați proprietatea: relativă și "fiul risipitor" se întoarce la locul lui. Aproape. De fapt, acesta apare în colțul din stânga sus al elementului părinte.

De ce se întâmplă acest lucru? Punctul se află în specificitatea proprietății poziției: absolut. În mod prestabilit, poziția sa depinde de fereastra browserului, dar dacă "părintele" este, de asemenea, poziționat altfel static, Poziția începe să depindă de elementul părinte. Acest lucru este foarte convenabil, deoarece puteți plasa componenta oriunde, fără a calcula numere uriașe în raport cu fereastra browserului. Recepția este adesea folosită pentru a plasa icoane, butoane și alte obiecte mici.

Poziționați CSS în centru

Una dintre principalele dificultăți pentru începători este aceea de a centra elementul vertical și orizontal. Utilizarea corectă a proprietății Poziție, pentru a face mai ușor. Poziția CSS: valoarea absolută în centru este stabilită după cum urmează. Să presupunem că aveți div cu clasa absolut-div, care este în "diva" cu clasa relativă-div. "Parent" este poziționat relativ și lățimea sa este egală cu lățimea întregii pagini. "Copilul" are o lățime și înălțime 400 px, poziționarea absolută și, în mod implicit, este localizată în colțul din stânga sus al elementului părinte.

Tot ce trebuie să faceți este să setați componenta absolută top: 50% și stânga: 50%. Aproape făcut! Absolute-div sa mutat de la fața locului și a fost aproape în centru, dar nu destul. Mijlocul "părintelui" atinge marginea acestuia și avem nevoie ca centrul "descendentului" să fie în centrul blocului. Pentru asta trebuie să-l întrebați -Marginea din stânga și margin-dreapta cu valori de -200 px. În acest fel vom muta blocul absolut poziționat la jumătate din înălțimea și lățimea sa. Totul, el este în centru!

Suprapuse componente

Problema poate fi o dificilă, la prima vedere, "suprapunere" a elementelor poziționate asupra "vecinilor" lor. De exemplu, o componentă cu Poziție: fix va suprapune tot ce se află pe pagină. Pentru a corecta o situație este posibilă prin intermediul proprietății z-index, totuși, rețineți că funcționează numai pentru elemente poziționate. În consecință, dacă doriți să plasați un bloc pe un element poziționat fix, acest bloc va trebui să fie, de asemenea, poziționat. De exemplu, relativă.

Lmodul de a învăța poziționarea - ia în considerare exemplele Poziție CSS, experimentați și încercați ceva propriu. Încercați să aflați cum să îl utilizați împreună cu funcția calc () - aceasta va oferi posibilitatea de a ajusta mai flexibil locația. Cu toate acestea, rețineți că această proprietate nu este concepută pentru a construi întreaga "rețea" a paginii. Cu ajutorul ei trebuie să mutați elemente relativ mici, în caz contrar vă puteți confunda prea ușor.