Poziționarea elementului Css3. CSS - Elemente de bloc de poziţionare

Un element bloc în HTML este un element care, implicit, ocupă întreaga lățime a elementului părinte. Elementul părinte poate fi un alt element de bloc sau o fereastră de browser. Puteți seta lățimea și înălțimea unui element de bloc folosind proprietățile CSS. Poziționarea elementelor bloc este procesul de poziționare a acestora în fereastra browserului și în raport cu ele folosind proprietățile CSS poziție, stânga, sus, dreapta și jos. Proprietatea de poziție CSS este concepută pentru a seta unul dintre cele patru tipuri de poziționare disponibile: statică (implicit), absolută, fixă ​​și relativă. Proprietățile CSS rămase, și anume stânga , sus , dreapta și jos , sunt folosite pentru a seta distanțe relativ la marginile din stânga, sus, dreapta și inferioară ale elementului părinte. De asemenea, atunci când setați anumite proprietăți, elementele bloc se pot suprapune unele pe altele, iar această caracteristică poate fi folosită și pe site-uri web.

Poziționare implicită (statică)

Dacă nu ați specificat o poziție pentru un element bloc sau ați specificat static , care este același lucru, atunci elementele bloc sunt aranjate în ordine. Mai mult, următorul bloc (de exemplu: roșu) este situat pe o linie nouă. De asemenea, această poziționare nu este afectată de setarea distanțelor stânga, sus, dreapta și jos.

Poziționare absolută (absolută)

Cu poziționarea absolută, poziția unui element este specificată în raport cu marginile ferestrei browser utilizând distanțele specificate de proprietățile stânga, sus, dreapta și jos. Dacă specificați distanțele stânga și dreapta în același timp și acestea sunt în conflict între ele, atunci se acordă preferință stânga , același lucru este valabil și pentru sus și jos , în care distanța de sus are prioritate. Poziționarea absolută este foarte des folosită împreună cu poziționarea relativă în scopuri de proiectare, atunci când este necesar să se plaseze diferite elemente unul față de celălalt, poate fi folosită și pentru a crea meniuri derulante, aspectul site-ului etc.

Poziționare fixă

Poziționarea fixă ​​este diferită de alte tipuri de poziționare și nu se mișcă odată cu conținutul pe măsură ce derulați pagina. Elementele de bloc cu poziție fixă ​​sunt ancorate folosind proprietățile din stânga, sus, dreapta și jos la marginile ferestrei browserului. Poziționarea fixă ​​este utilizată pentru a crea interfețe cadru (fereastra browserului este împărțită în mai multe zone), un meniu fix, un subsol fix al site-ului și blocuri „permanente” (listă de linkuri, butoane sociale etc.).

Poziționare relativă

Poziționarea relativă este specificată prin specificarea distanțelor stânga, sus, dreapta și jos în raport cu poziția sa curentă.

Cu toate acestea, această poziție de bloc poate fi creată și folosind proprietatea marjă.

Poziționarea relativă nu este distractiv de folosit singură, este folosită în mare parte împreună cu poziționarea absolută.

Să luăm în considerare opțiunile:

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