Plasarea obiectelor în html. Poziționarea (alinierea) elementelor bloc în CSS

Ultima actualizare: 28.04.2016

CSS oferă capabilități de poziționare a elementelor, ceea ce înseamnă că putem plasa un element într-o anumită locație de pe pagină.

Proprietatea principală care controlează poziționarea în CSS este proprietatea poziției. Această proprietate poate lua una dintre următoarele valori:

static: poziționarea elementului standard, valoarea implicită

absolut: elementul este poziționat relativ la limitele elementului container dacă proprietatea sa de poziție nu este statică

relativ : elementul este poziționat relativ la poziția sa implicită. De obicei, scopul principal al poziționării relative nu este de a muta un element, ci de a stabili un nou punct de ancorare pentru poziționarea absolută a elementelor sale imbricate.

fix : elementul este poziționat în raport cu fereastra browserului, acest lucru vă permite să creați elemente fixe care nu își schimbă poziția atunci când sunt derulate

Nu ar trebui să aplicați simultan proprietatea float și orice alt tip de poziționare decât static (adică tipul implicit) unui element.

Poziționare absolută

Zona de vizualizare a browserului are o margine de sus, de jos, din dreapta și din stânga. Fiecare dintre aceste patru margini are o proprietate CSS corespunzătoare: stânga, dreapta, sus și jos. Valorile acestor proprietăți sunt specificate în pixeli, ems sau procente. Nu este necesar să setați valori pentru toate cele patru părți. De regulă, sunt setate doar două valori - indentarea din partea de sus a marginii superioare și indentarea de la marginea din stânga.

SALUT LUME

Aici div-ul poziționat absolut va fi de 100 de pixeli la stânga marginii ferestrei și la 50 de pixeli de jos.

Nu este atât de important ca după acest element div să mai existe și alte elemente. Acest bloc div va fi în orice caz poziționat în raport cu limitele ferestrei de vizualizare a browserului.

Dacă un element cu poziționare absolută este situat într-un alt container, care, la rândul său, are o valoare a proprietății de poziție care nu este egală cu static , atunci elementul este poziționat relativ la limitele containerului:

Poziționare relativă

Poziționarea relativă este de asemenea specificată folosind valoarea relativă. Pentru a specifica poziția specifică în care este deplasat elementul, se folosesc aceleași proprietăți de sus, stânga, dreapta, jos:

proprietatea z-index

În mod implicit, când două elemente au același chenar, elementul care a fost definit ultima dată în marcajul html este afișat deasupra celuilalt. Cu toate acestea, proprietatea z-index vă permite să schimbați ordinea elementelor atunci când sunt suprapuse. Proprietatea ia un număr ca valoare. Elementele cu o valoare z-index mai mare vor apărea deasupra elementelor cu o valoare z-index mai mică.

De exemplu:

Acum să adăugăm o nouă regulă stilului de bloc redBlock:

RedBlock( z-index: 100; poziție: absolut; sus: 20px; stânga: 50px; lățime: 80px; înălțime: 80px; culoarea fundalului: roșu; )

Aici indexul z este 100. Dar nu trebuie să fie numărul 100. Deoarece al doilea bloc are un indice z nedefinit și este de fapt zero, pentru redBlock putem seta proprietatea indicelui z la orice valoare mai mare decât zero.

Și acum primul bloc se va suprapune pe al doilea, și nu invers, așa cum a fost cazul la început.

Imaginați-vă că un dezvoltator web nu trebuie să se gândească deloc la cum va arăta vizual pagina finală. Pur și simplu scrie codul, elementele în sine se aliniază pe pagină, de sus în jos (bloc) și de la stânga la dreapta (inline). Cu cât este scris mai sus în document codul, cu atât va apărea mai sus pe pagină.

În general, vom vedea comportamentul natural al elementelor și ordinea în care sunt afișate pe pagină - fluxul documentului. Dar nu suntem deloc multumiti de aceasta comanda vrem sa plasam sigla in coltul din stanga sus, iar butonul putin in dreapta. Avem nevoie de control complet asupra tuturor elementelor, noi decidem unde și ce va fi amplasat. Și pentru aceasta aveți nevoie de un instrument (proprietate) care schimbă comportamentul normal al elementelor din flux. Ce fel de proprietate este aceasta?

ÎN CSS stiluri aceasta se numește poziționare (poziţie), care poate fi obișnuit (static), relativă (relativ)și absolută (absolut).

Poziționarea relativă în CSS

La poziționare relativă, blocul se deplasează în raport cu poziția inițială. Cu toate acestea, după ce a scris blocului:

Poziția: relativă;

nu se va întâmpla nimic, va rămâne pe loc. Și sistemul de coordonate mută blocul (sus, jos, stânga, dreapta), cu valori atât pozitive, cât și negative.

Cum functioneaza?

În interiorul unui bloc galben cu o clasă bloc-galben există un bloc roșu cu o clasă bloc-relativ. Într-un flux normal, blocul roșu se suprapune pe cel galben, deoarece este scris ultimul în cod.

Trebuie să mutăm blocul roșu în jos cu 10 pixeli. Acest lucru se poate face doar prin schimbarea forțată a poziției blocului roșu. Așa scriem noi sus: 10px, dar trebuie să indicați de unde vor fi numărați acești 10 pixeli?

Fiind înregistrat poziție: relativă, clarificăm că numărul este relativ la poziția sa actuală.

Bloc-galben (
culoare de fundal: #ffe70f;
}

relativ la bloc (
poziție: relativă;
sus: 10px;
culoare de fundal: #ed5b77;
}

În imagine vedem cum blocul roșu s-a deplasat în jos, cu 10 pixeli în jos față de poziția inițială.

Dacă îl eliminați din cod poziție: relativă, atunci blocul va rămâne pe loc. Dacă în schimb relativ, scrie absolut, apoi implicit acești 10 pixeli vor fi numărați de la marginea ferestrei browserului și, ca urmare, blocul nostru, dimpotrivă, se va ridica, ajungând la marginea de jos a browserului. Și asta nu făcea parte din planurile noastre.

Poziționare absolută în CSS

Există un bloc în imagine pozitionat absolut, acesta este momentul în care sistemul de coordonate este numărat de la marginea browserului, prin înlocuirea unui singur cuvânt, am schimbat poziția blocului.

Poziție: absolută;

Există o particularitate. Poziționare absolută afectează și elementele inline. Dacă elementul inline este dat poziție: absolută, atunci se va comporta ca un bloc. Aceasta este analogă cu proprietatea - afisare: bloc.

Asta nu este tot, elementul „absolut” situat în interiorul părintelui „relativ” își schimbă punctul de referință de coordonate și începe să fie poziționat departe de părinte.

Bloc cu clasa bloc-absolut fi în interiorul părintelui bloc-galben.

Bloc-galben (
poziție: relativă;
umplutură: 10px;
culoare de fundal: #ffe70f;
}

Din moment ce blocul galben are poziționare relativă, apoi blocul roșu cu poziționare absolută, se deplasează în raport cu roșu cu pixelii specificați.

Bloc absolut (
poziție: absolută;
jos: 10px;
stânga: 10px;
culoare de fundal: #ed5b77;
}

Poziționare fixă

Când derulați o pagină, un bloc cu poziție: fixă, va rămâne pe loc, această metodă este de obicei folosită pentru a repara bara de navigare.

indicele z

Rezolvă ordinea suprapunerii blocurilor „absolute”. Avem nevoie ca blocul roșu să fie deasupra celui galben, apoi indicăm z-index: 2 pentru roșu și z-index: 1 pentru galben.

Bloc-rosu (
poziție: relativă;
indicele z: 2;
culoare de fundal: #ffe70f;
}

Bloc-galben (
poziție: absolută;
sus: 20px;
indicele z: 1;
culoare de fundal: #ed5b77;
}

Unul dintre cele mai bune lucruri despre CSS este că stilurile ne oferă capacitatea de a poziționa conținutul și elementele pe o pagină în aproape orice mod imaginabil. Acest lucru adaugă structură designului nostru și ajută la creșterea vizuală a conținutului.

Există mai multe tipuri diferite de poziționare în CSS, fiecare dintre aceste tipuri având propriul său domeniu de aplicare. În acest capitol, vom analiza câteva cazuri de utilizare diferite — crearea de aspecte reutilizabile și poziționarea unică a elementelor de unică folosință — și vom descrie câteva metode pentru a face acest lucru.

Poziționare prin plutitor

O modalitate de a poziționa elementele pe o pagină este prin proprietatea float. Această proprietate este destul de versatilă și poate fi utilizată în multe moduri diferite.

În esență, proprietatea float preia un element, îl elimină din fluxul normal al paginii și îl poziționează la stânga sau la dreapta elementului său părinte. Toate celelalte elemente de pe pagină se vor înfăşura în jurul unui astfel de element. De exemplu, paragrafele se vor înfăşura în jurul unei imagini dacă elementul proprietatea float este setată.

Când proprietatea float este aplicată la mai multe elemente simultan, face posibilă crearea unui aspect cu elemente flotante lângă sau vizavi unul de celălalt, așa cum se arată într-un aspect cu mai multe coloane.

Proprietatea float ia mai multe valori, cele două cele mai populare fiind stânga și dreapta, care permit elementului să plutească la stânga sau la dreapta părintelui său.

Imag (float: stânga; )

plutește în practică

Să creăm un aspect general al paginii cu un antet în partea de sus, două coloane în centru și un subsol în partea de jos. În mod ideal, această pagină ar trebui să fie marcată cu elemente