Centrarea div-ului și alte subtilități de poziționare. Poziționare CSS

Poziționarea în CSS pare destul de simplă. Indicați ce bloc și unde ar trebui să fie amplasat. Totuși, totul nu este atât de simplu pe cât pare la prima vedere. Există mai multe puncte care îi pot deruta pe începători. Puteți obține mult mai multă valoare din poziționare dacă înțelegeți în detaliu cum funcționează.

Model de casetă în CSS și tipuri de poziționare.

Înainte de a începe, vă sfătuiesc să citiți articolul Box Model în CSS. Pe scurt: fiecare element din html este un dreptunghi pentru care puteți specifica valorile marginilor interioare și exterioare, precum și chenarul care le separă.

Schemele de poziționare definesc unde ar trebui să fie amplasat acest dreptunghi, precum și modul în care ar trebui să afecteze elementele din jurul lui.

Proprietatea poziției în CSS poate lua cinci valori:

absolut
relativ
fix
static
moşteni

Valoarea static este implicită. Orice element cu poziționare statică se află în fluxul general al documentului. Regulile pentru plasarea acestuia sunt determinate de modelul Box. Pentru astfel de elemente, proprietățile de sus, dreapta, jos și stânga vor fi ignorate. Pentru a utiliza aceste proprietăți, poziționarea elementului trebuie să fie absolută, relativă sau fixă.

Valoarea de moștenire, ca și în cazul tuturor celorlalte proprietăți CSS, este utilizată pentru a se asigura că elementul folosește aceeași valoare ca și elementul părinte.

Poziționare absolută

Poziționarea absolută elimină un element din fluxul general al documentului. Cât despre elementele din jur, în acest caz pur și simplu îl ignoră pe cel căutat, de parcă ar avea afișajul: none; property set. . Dacă nu doriți ca spațiul pentru un astfel de element să fie umplut cu alte elemente, atunci trebuie să veniți cu o abordare diferită.

Poziția unui element se stabilește cu poziționare absolută folosind proprietățile de sus, stânga, dreapta și jos. Trebuie doar să specificați două dintre ele, sus sau jos și stânga sau dreapta. Dacă nu sunt specificate proprietăți, atunci perechea din stânga sus este setată la 0.

Cheia pentru poziționarea absolută este să înțelegeți care este punctul dvs. de referință. Dacă proprietatea de sus este setată la 20px, atunci de unde ar trebui să fie numărate?

Răspunsul este simplu: astfel de elemente sunt poziționate relativ la cel mai apropiat element părinte, care are o poziție diferită de static . Dacă nu există un astfel de element, atunci elementul este poziționat în raport cu documentul principal. Adică, atunci când setați poziționarea absolută, CSS îi spune browserului să se uite la elementul părinte și, dacă poziționarea acestuia nu este statică, atunci ar trebui să alinieze elementul curent în raport cu acesta.

Poziționare relativă.

Elementele poziționate relativ sunt plasate pe baza propriei poziții, o deplasare normală față de locația lor normală. Acest lucru este similar cu adăugarea de umplutură la un element folosind proprietatea margine. Cu toate acestea, există o diferență semnificativă: elementele adiacente, atunci când se utilizează poziționarea, nu iau în considerare această schimbare.

Imaginați-vă astfel: o anumită imagine este deplasată și în locul ei rămâne o „fantomă”; toate elementele sunt situate în raport cu această „fantomă”. Acest lucru ne permite să suprapunem elemente unul peste altul.

Astfel, elementele cu poziționare relativă sunt preluate din fluxul normal al elementului, dar influențează totuși amplasarea elementelor învecinate, care se comportă astfel încât elementul original să fie încă în fluxul documentului.

În acest caz, nu ar trebui să ne punem întrebarea cu privire la ce element este poziționat aici. Răspunsul este întotdeauna: flux normal de documente. Se pare că ați adăugat căptușeală unui element, dar, în același timp, nu ați afectat elementele învecinate.

Poziționare fixă

Poziționarea fixă acționează similar cu poziționarea absolută, cu diferențe minore.

În primul rând, un element cu poziție fixă este întotdeauna poziționat în raport cu fereastra browserului, iar elementele părinte sunt ignorate.

A doua diferență vine de la numele său. Elementele fixe sunt fixate pe pagină. Nu se mișcă la derulare.

indicele Z

Pagina site-ului este bidimensională. Are latime si inaltime. Indicele Z adaugă o a treia dimensiune, adâncimea.

Cu cât este mai mare acest index, cu atât elementul este mai ridicat pe pagină. Cu el ne putem asigura că un element este plasat deasupra altuia. În mod implicit, valoarea sa este zero. Valorile negative sunt, de asemenea, acceptabile.

De fapt, z-index este mult mai complex decât îl descriu aici, dar acesta este un subiect pentru alt articol. Acum, principalul lucru de reținut este însăși ideea celei de-a treia dimensiuni și faptul că numai elementele poziționate pot folosi această proprietate.

Probleme de poziționare.

Să ne uităm la câteva probleme comune asociate cu poziționarea, precum și la câteva cuvinte despre cum să le rezolvăm.

Nu puteți utiliza proprietatea poziție și proprietatea float pe același element în același timp. Ambele proprietăți afectează poziția elementului, astfel încât ultima proprietate specificată va fi utilizată.
Din comentarii:
Puteți utiliza poziție: relativă și float în același timp.

Când position:absolute și float sunt specificate simultan, nu se aplică ultima proprietate specificată. În acest caz, indiferent de ordinea acestor stiluri, se aplică position:absolute, iar valoarea rezultată (sau calculată) a proprietății float este setată la none, indiferent de valoarea inițială, i.e. ignorat.
Marjele nu se prăbușesc pe elementele poziționate absolut. Să presupunem că există un paragraf pe pagină cu o marjă de jos de 20 px. Urmează o imagine cu o margine superioară de 30 px. Distanța dintre imagine și text nu va fi de 50px (20px + 30px), ci de 30px (30px > 20px). Acest comportament se numește colapsing margins. Două liniuțe sunt combinate într-una singură. Elementele poziționate absolut nu au marje pentru a se prăbuși, așa că rezultatul poate să nu fie cel așteptat.
IE și z-index.În IE6, un element este întotdeauna selectat în partea de sus a stivei, indiferent de indicele z al său sau de indicele z al elementelor din jur.

IE6 și IE7 au o altă problemă cu z-index. IE se uită la elementul părinte pentru a determina în ce grup de elemente se află partea de sus a stivei, alte browsere folosesc contextul global. De exemplu:

Ne așteptăm ca paragraful să apară mai sus decât imaginea, deoarece indicele z este mai mare. Cu toate acestea, IE6 și IE7 plasează imaginea mai sus, deoarece se află în stive de documente diferite. O stivă este pentru div, al doilea pentru img, iar imaginea are un indice z mai mare decât div.

Concluzie

Proprietatea poziție stabilește comportamentul de poziționare al unui element conform uneia dintre schemele de poziționare. Valorile proprietăților disponibile sunt absolute, relative, fixe, statice (implicit) și moștenire.

Schemele de poziționare definesc regulile de plasare a unui element pe o pagină web, precum și influența asupra locației elementelor învecinate.

Proprietatea z-index poate fi aplicată numai elementelor cu proprietatea de poziție setată. Adaugă o a treia dimensiune paginii și stabilește ordinea stivei de elemente.

Proprietatea poziției pare ușor de înțeles, dar funcționează puțin diferit decât pare la prima vedere. Deseori dezvoltatorii cred că au nevoie de poziționare relativă, deși cel mai probabil ar trebui să folosească poziționarea absolută. Practic, proprietatea float este utilizată în timpul aspectului, iar proprietatea poziție este necesară pentru elementele pe care doriți să le „smulgeți” din fluxul general al documentului.

Locație neobișnuită!

Decideți ce element să afișați în față!

Elementele se pot suprapune!

Poziționare

Proprietățile de poziționare CSS vă permit să poziționați un element. De asemenea, pot poziționa un element în spatele altuia și pot specifica ce ar trebui să se întâmple atunci când conținutul elementului este prea mare.

Elementele pot fi poziționate folosind proprietățile de sus, jos, stânga și dreapta. Cu toate acestea, aceste proprietăți nu vor funcționa decât dacă proprietatea poziției este setată. De asemenea, funcționează diferit în funcție de metoda de poziționare.

Există patru metode diferite de poziționare.

Poziționare statică

Elementele HTML sunt poziționate static în mod implicit. Un element poziționat static este întotdeauna poziționat conform fluxului standard de elemente de pe pagină.

Elementele poziționate static nu sunt afectate de proprietățile de sus, jos, stânga și dreapta.

Poziționare fixă

Un element cu poziție fixă este poziționat în raport cu fereastra browserului.

Nu se va mișca chiar dacă fereastra este derulată:

Cometariu: IE7 și IE8 acceptă valoarea fixă numai dacă este specificat tipul de document!DOCTYPE.

Elementele fixe sunt îndepărtate din fluxul normal. Documentul și alte elemente se comportă ca și cum elementul fix nu ar exista.

Elementele fixe se pot suprapune cu alte elemente.

Poziționare relativă

Un element poziționat relativ este poziționat în raport cu poziția sa normală.

Elementele poziționate relativ sunt adesea folosite ca containere pentru elementele poziționate absolut.

Poziționare absolută

Un element poziționat absolut este poziționat în raport cu primul element părinte care este poziționat altfel decât static. Dacă nu se găsește un astfel de element, elementul părinte este luat ca :

Elementele poziționate absolut sunt îndepărtate din fluxul de elemente standard. Documentul și alte elemente se comportă ca și cum elementul poziționat absolut nu ar exista.

Elementele poziționate absolut se pot suprapune cu alte elemente.

Elemente suprapuse

Atunci când elementele sunt situate în afara fluxului standard, ele se pot suprapune cu alte elemente.

Proprietatea z-index specifică ordinea verticală a unui element (care ar trebui să fie plasat în fața sau în spatele altor elemente).

Un element poate avea o ordine verticală pozitivă sau negativă:

Un element cu o ordine verticală mai mare se află întotdeauna în fața elementelor cu o ordine verticală mai mică.

Cometariu: Dacă două elemente poziționate se suprapun și nu este specificată nicio ordine verticală, elementul situat mai târziu în codul HTML va fi afișat în partea de sus.

Mai multe exemple

Setarea formei elementului
Acest exemplu demonstrează cum se definește forma unui element. Elementul este tăiat la această formă și apoi afișat.

Cum să afișați un element depășit folosind derularea
Acest exemplu demonstrează cum să setați proprietatea overflow pentru a crea o bară de defilare atunci când conținutul elementului este prea mare pentru a se potrivi în zona specificată.

Cum să forțați browserul să gestioneze automat overflow
Acest exemplu demonstrează cum să forțezi browserul să gestioneze automat overflow.

Schimbarea cursorului
Acest exemplu demonstrează cum se schimbă cursorul.

Toate proprietățile de poziționare CSS

Numărul din coloana „CSS” indică în ce versiune de CSS este definită proprietatea (CSS1 sau CSS2).

Proprietate	Descriere	Valori	CSS

Sunteți încă confuz cu privire la modul în care funcționează poziționarea absolută în CSS și pierd elemente de pe ecran? Să înțelegem această magie.

Introducere în poziționare

Când setați position: absolute , nu elementul în sine iese în prim-plan, ci containerul său părinte, deoarece poziționarea în CSS este relativă la acesta. Dificultatea este că acesta nu este întotdeauna părintele imediat al elementului.

Să ne uităm la un cod cu patru div-uri imbricate unul în celălalt ca o păpușă.

< body >

< div class = "box-1" >

< div class = "box-2" >

< div class = "box-3" >

< div class = "box-4" > < / div >

< / div >

< / body >

Casetele box-1 , box-2 și box-3 sunt centrate pentru frumusețe folosind marja: proprietățile CSS auto și flex. Blocul caseta-4 rămâne în poziția sa implicită în fluxul de documente.

body ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; margin: auto; )

corp (

display: flex;

Caseta-1,

Caseta-2,

Caseta-3 (

display: flex;

Marja: auto;

Toate cele 4 elemente au poziționare implicită. Momentan aspectul arată astfel:

.box-4 fara pozitionare

Contra ce ne poziționăm?

Pentru a se poziționa, un element trebuie să cunoască două lucruri:

care părinte va deveni punctul de plecare;
cantitatea de deplasare relativă la punctul de referință (sus, jos, dreapta sau stânga).

Dacă definiți poziție: absolută pentru caseta-4, acel element va părăsi fluxul normal al documentului. Dar acum rămâne la locul său, deoarece coordonatele offset nu sunt specificate. Dacă lățimea unui element nu este definită în CSS, aceasta va fi egală cu lățimea conținutului său (plus padding și chenar).

.box-4 cu poziţionare absolută fără offset

Acum să adăugăm proprietățile de sus: 0 și stânga: 0 . Elementul trebuie să determine care container părinte va deveni punctul de referință pentru aceste coordonate. Cel mai apropiat element cu o poziție nestatică (cel mai adesea poziție: relativă) devine acesta. box-4 începe să-și interogheze strămoșii unul câte unul. Nici box-3, nici box-2, nici box-1 nu sunt potrivite, deoarece au o poziționare implicită în CSS (unset).

Dacă un strămoș poziționat nu este găsit, elementul este plasat în raport cu corpul documentului:

.box-4 cu pozitionare absoluta. Elemente părinte fără poziționare

Dacă setați poziția: față de elementul caseta-1, acesta devine punctul de referință:

.box-4 cu pozitionare absoluta. .box-1 cu poziţionare relativă

Un element poziționat absolut este poziționat în raport cu strămoșul său poziționat cel mai apropiat.

Odată ce un punct de referință a fost găsit, tot ce este deasupra lui în arborele DOM încetează să mai conteze.

Dacă setați poziție: relativă și pentru caseta-2 , atunci caseta-4 va fi poziționată relativ la aceasta, deoarece acest strămoș este mai aproape.

.box-4 cu pozitionare absoluta. .box-2 cu poziţionare relativă

La fel și pentru containerul box-3:

Două instrumente principale sunt adesea folosite pentru aspectul paginii - poziționareȘi libera circulatie (plutitoare). Poziționarea CSS vă permite să specificați unde apare caseta unui element, iar flotarea liberă mută elementele la marginea stângă sau dreaptă a casetei containerului, permițând restului conținutului să „curgă” în jurul acestuia.

Poziționarea și mișcarea liberă a elementelor

1. Tipuri de poziţionare

Proprietatea de poziție vă permite să specificați cu precizie noua locație a blocului în raport cu locul în care s-ar afla în fluxul normal al documentului. În mod implicit, toate elementele sunt aranjate secvenţial unul după altul în ordinea în care sunt definite în structura documentului HTML. Proprietatea nu este moștenită.

poziţie
Sens:
static	Valoarea implicită înseamnă nicio poziționare. Elementele sunt afișate secvenţial unul după altul, în ordinea în care sunt definite în documentul HTML. Folosit pentru a șterge orice altă valoare de poziționare.
relativ	Un element poziționat relativ este mutat din poziția sa normală în direcții diferite față de limitele containerului său părinte, dar spațiul pe care l-a ocupat nu dispare. Cu toate acestea, un astfel de element se poate suprapune cu alt conținut de pe pagină. Dacă pentru un element relativ poziționat setați proprietățile sus și jos sau stânga și dreapta în același timp, atunci în primul caz va funcționa numai sus, în al doilea - stânga. Poziționarea relativă vă permite să setați un index z pentru un element, precum și să poziționați absolut elementele copil într-un bloc.
absolut	Un element poziționat absolut este eliminat complet din fluxul de documente și poziționat în raport cu limitele blocului său container (un alt element sau fereastră de browser). Blocul container pentru un element poziționat absolut este cel mai apropiat element strămoș a cărui valoare a proprietății de poziție nu este statică. Locația marginilor elementului este determinată folosind proprietățile offset. Spațiul pe care l-a ocupat un astfel de element se prăbușește ca și cum elementul nu ar exista pe pagină. Un element poziționat absolut se poate suprapune sau poate fi suprapus de alte elemente (datorită proprietății z-index). Orice element poziționat absolut generează un bloc, adică preia afișarea valorii: bloc; .
fix	Fixează un element într-o locație specificată pe pagină. Blocul container al unui element fix este fereastra de vizualizare, adică elementul este întotdeauna fix în raport cu fereastra browserului și nu își schimbă poziția în timpul derulării paginii. Elementul în sine este complet eliminat din fluxul de document principal și creat într-un flux de document nou.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Orez. 1. Diferența dintre poziționarea statică, relativă și absolută

2. Proprietăți offset

Proprietățile descriu decalajul față de cea mai apropiată parte a blocului container. Setați pentru elementele pentru care valoarea proprietății de poziție nu este statică. Ele pot lua atât valori pozitive, cât și negative. Nu moștenit.

Pentru proprietatea de sus, valorile pozitive mută marginea superioară a elementului poziționat dedesubt, iar valorile negative mută marginea superioară a blocului său container. Pentru proprietatea din stânga, valorile pozitive mută marginea elementului poziționat la dreapta, iar valorile negative mută marginea elementului poziționat la stânga. Adică, valorile pozitive mută elementul în interiorul blocului container, iar valorile negative îl mută în afara acestuia.

3. Poziţionarea în cadrul unui element

Pentru blocul container al unui element poziționat absolut, proprietatea poziție: relativă este setată fără decalaje. Aceasta permite poziționarea elementelor într-un element container.

.wrap ( umplutură: 10px; înălțime: 150px; poziție: relativ; fundal: #e7e6d4; text-align: right; chenar: 3px întrerupt #645a4e; ) .white (poziție: absolut; lățime: 200px; sus: 10px; stânga : 10px; umplutură: 10px; fundal: #ffffff; chenar: 3px punctat #312a22; )

Orez. 2. Poziţionare relativă absolută

4. Probleme de poziţionare

1. Dacă lățimea sau înălțimea unui element poziționat absolut este setată la auto , atunci valoarea acestuia va fi determinată de lățimea sau înălțimea conținutului elementului. Dacă lățimea sau înălțimea este declarată în mod explicit, atunci aceasta este valoarea care va fi atribuită.
2. Dacă în interiorul unui bloc cu poziție: absolut există elemente pentru care este setat plutitorul, atunci înălțimea acestui element va fi egală cu înălțimea celui mai înalt dintre aceste elemente.
3. Pentru un element cu poziție: absolută sau poziție: fixă, nu puteți seta simultan proprietatea float, dar pentru un element cu poziție: relativ puteți.
4. Dacă strămoșul elementului poziționat este un element bloc, atunci containerul bloc este format din zona de conținut delimitată de chenar. Dacă strămoșul este un element inline, blocul container este format de limita exterioară a conținutului său. Dacă nu există un strămoș, blocul container este elementul corpului.

5. Libera circulatie a elementelor

În ordinea normală, elementele bloc sunt redate pornind de la marginea de sus a ferestrei browserului și lucrând spre marginea de jos. Proprietatea float vă permite să mutați orice element, aliniindu-l la marginea stângă sau dreaptă a paginii web sau elementul container care îl conține. În acest caz, alte elemente de bloc îl vor ignora, iar elementele inline se vor deplasa la dreapta sau la stânga, eliberând spațiu pentru el și curgând în jurul lui.

Orez. 3. Libera circulatie a elementelor

Un bloc plutitor preia dimensiunile conținutului său, ținând cont de umplutură și chenare. Marginile de sus și de jos ale elementelor plutitoare nu se prăbușesc. Proprietatea float se aplică atât elementelor bloc, cât și elementelor inline.

Marginea exterioară stângă sau dreaptă a unui element deplasat, spre deosebire de elementele poziționate, nu poate fi situată la stânga (sau la dreapta) a muchiei interioare a blocului său container, de exemplu. depășește limitele sale. Mai mult, dacă este specificată umplutura internă pentru blocul container, atunci blocul plutitor va fi distanțat de marginea blocului container la distanța specificată.

Proprietatea modifică automat valoarea calculată (afișată de browser) a proprietății de afișare pentru a afișa: bloc pentru următoarele valori: inline , inline-block , table-row , table-row-group , table-coloana , table-coloana-grup , celulă-tabel . legendă-tabel, grup-antet-tabel, grup-subsol-tabel. Valoarea tabelului inline se modifică în tabel .

Proprietatea nu are efect asupra elementelor cu display: flex și display: inline-flex .

Când utilizați proprietatea float pe elementele bloc, asigurați-vă că specificați o lățime. Acest lucru va crea spațiu pentru alt conținut în browser. Dar dacă lățimea combinată a tuturor coloanelor este mai mare decât spațiul disponibil, atunci ultimul element va coborî.

În același timp, marginile verticale ale elementelor plutitoare nu se prăbușesc cu marginile elementelor învecinate, spre deosebire de elementele bloc obișnuite.

6. Anulați fluxul în jurul elementelor

6.1. proprietate clară

Proprietatea clear determină modul în care va fi poziționat elementul care urmează elementul plutitor. Proprietatea anulează float pe una sau ambele părți ale elementului care este stabilit de proprietatea float. Pentru a preveni afișarea fundalului sau a marginilor sub elementele plutitoare, utilizați regula (depășire: ascuns;).

6.2. Curățarea unui flux cu stiluri folosind clasa clearfix și pseudo-clasa :after

Să presupunem că aveți un container bloc pentru care lățimea și înălțimea nu sunt specificate. În interiorul acestuia este plasat un bloc plutitor cu dimensiuni specificate.

Orez. 4. „Efectul de colaps” al blocului container

Soluție pentru problemă:
Creăm clasa .clearfix și, în combinație cu pseudo-clasa :after, o aplicăm blocului container.

.container ( umplutură: 20px; fundal: #e7e6d4; chenar: 3px punctat #645a4e; ) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; umplutură: 0 20px; fundal: #ffffff ; chenar: 3px punctat #666666; ) .clearfix:după (conținut: „”; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns; )

A doua opțiune pentru ștergerea fluxului:

Clearfix:după (conținut: „”; afișare: tabel; șterge: ambele; )
Orez. 5. Aplicarea metodei de „curățare” unui bloc container care conține un element plutitor

6.3. O modalitate ușoară de a curăța un flux

Există un alt truc pentru a curăța fluxul pentru un element care conține elemente plutitoare, cum ar fi o listă orizontală cu marcatori:

Ul ( margine: 0; stil listă: niciunul; umplutură: 20px; fundal: #e7e6d4; overflow: automat; ) li ( float: stânga; lățime: calc(100% / 3 - 20px); înălțime: 50px; margin- dreapta: 20px; fundal: #ffffff; chenar: 3px punctat #666666; ) li:last-child (marja-dreapta: 0;) Fig. 6. Curățarea fluxului de listă orizontal

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 folosită pentru a crea interfețe de cadru (fereastra browserului este împărțită în mai multe zone), un meniu fix, un subsol fix al site-ului și blocuri „permanente” (lista de linkuri, butoane sociale etc.).