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 interiorul ferestrei browserului și relativ la acestea. folosind CSS poziţia proprietăţilor , stânga , sus , dreapta şi jos . proprietate CSS poziția are scopul de a specifica 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 destinate să stabilească 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 cu linie nouă. De asemenea, această poziționare nu este afectată de setarea distanțelor stânga, sus, dreapta și jos.

Poziționare absolută (absolută)

La poziționare absolută Poziția elementului este setată în raport cu marginile ferestrei browser folosind 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 folosită foarte des î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 de cadru (fereastra browserului este împărțită în mai multe zone), meniu fix, un subsol fix al site-ului și blocuri „permanente” (lista 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:

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 de plasare a 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. În ceea ce privește elementele din jur, în acest caz pur și simplu îl ignoră pe cel căutat, de parcă ar avea afișarea: nicio proprietate; . 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ă.

Setați poziția unui element 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, deplasarea obișnuită 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 se mișcă, iar î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.

1. 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.

2. 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.
3. IE și indicele z.În IE6, un element este întotdeauna selectat în partea de sus a stivei, indiferent de indexul său z 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 este 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 poziț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.

Cu poziționarea CSS, puteți plasa un element exact unde doriți pe pagină. Împreună cu plutitoare (vezi Lecția 13), poziționarea vă oferă oportunități excelente de a crea modele precise și sofisticate.

În această lecție vom discuta următoarele:

Principiile poziționării CSS

Să ne imaginăm fereastra browserului ca un sistem de coordonate:

Principiile poziționării CSS sunt că puteți poziționa caseta oriunde în sistemul de coordonate.

Să presupunem că vrem să poziționăm titlul. Când utilizați modelul cutie (vezi Lecția 9), antetul arată astfel:

Dacă vrem să-l poziționăm la 100px din partea de sus a documentului și 200px din stânga, trebuie să introducem următorul cod CSS:

H1 ( poziție: absolut; sus: 100px; }

stânga: 200px;

Iată rezultatul:

Poziționare absolută

După cum puteți vedea, poziționarea CSS este o tehnică foarte precisă atunci când plasați elemente. Este mult mai ușor decât să folosești tabele, imagini transparente sau ceva de genul acesta.

Un element pozitionat nu primeste absolut niciun spatiu pe document. Aceasta înseamnă că după poziționare nu lasă niciun spațiu gol în urmă. Pentru a poziționa un element în mod absolut, proprietatea poziției trebuie să aibă valoarea absolut . Puteți folosi valorile, stânga, corect top Şi fund

Ca exemplu de poziționare absolută, vom plasa 4 casete în colțurile documentului:

#box1 ( poziție: absolut; sus: 50px; poziție: absolut; stânga: 50px; poziție: absolut;) #box2 ( poziție: absolut; sus: 50px;

dreapta: 50px;

) #box3 ( jos: 50px; dreapta: 50px;

) #box4 ( jos: 50px; stânga: 50px;

)

Poziționare relativă

Pentru a poziționa un element relativ, setați proprietatea poziției la

relativ

. Diferența dintre poziționarea relativă absolută este modul în care este calculată poziționarea.

< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body >

Poziția elementului plasat relativ la

calculată în raport cu poziția sa inițială în document

. Aceasta înseamnă că mutați elementul la dreapta, la stânga, în sus sau în jos. Astfel, elementul încă ocupă spațiu în document după poziționare. Ca exemplu de poziționare relativă, să încercăm să plasăm trei imagini în raport cu locația lor inițială pe pagină. Observați că desenele au lăsat spațiu gol în pozițiile lor originale în document după ce au fost mutate. 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. Ca exemplu de poziționare relativă, să încercăm să plasăm trei imagini în raport cu locația lor inițială pe pagină. Observați că desenele au lăsat spațiu gol în pozițiile lor originale în document după ce au fost mutate. Să ne uităm la un cod cu patru div-uri imbricate unul în celălalt ca o păpușă.

Casetele box-1 , box-2 și box-3 sunt centrate pentru frumusețe folosind marja: proprietăți 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 (
• Marja: auto;

Toate cele 4 elemente au poziționare implicită. Pe în acest moment aspectul arată astfel:

.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 punctul de referință este 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:

În zilele noastre, dezvoltatorii web pot construi machete complexe de pagini web folosind diferite tehnici CSS. Unele dintre aceste tehnici au o istorie lungă (float), altele (flexbox) au câștigat popularitate în ultimii ani.

În acest articol, vom arunca o privire mai atentă asupra unor lucruri puțin cunoscute despre poziționarea CSS.

Înainte de a începe, să recapitulăm rapid elementele de bază. diverse tipuri poziționare.

Prezentare generală a metodelor de poziționare disponibile

Proprietatea de poziție CSS determină tipul de poziționare a unui element.

Opțiuni de poziționare

static este valoarea implicită a proprietății de poziționare. Vă sfătuim că acest element nu folosește poziționarea - poziționarea se aplică numai dacă specificați un alt tip de poziționare decât cel implicit.

Pentru a face acest lucru, trebuie să setați proprietatea poziției la una dintre următoarele valori:

• relativ
• absolut
• fix
• lipicios

Și numai după setarea poziționării, puteți utiliza proprietăți care compensează elementul:

• corect
• fund
• Valoarea inițială a acestor proprietăți este cuvânt cheie auto.

Trebuie luat în considerare faptul că, dacă un element are proprietatea de poziție setată la absolute sau fixed , atunci este un element poziționat absolut. De asemenea, proprietatea z-index începe să funcționeze pentru elementele poziționate, ceea ce determină ordinea de stivuire.

Diferențele dintre principalele metode de poziționare

Acum să ne uităm rapid la trei diferențe de bază între tipurile de poziționare disponibile:

• elementele poziționate în mod absolut (absolut) sunt complet îndepărtate din pârâu, locul lor este luat de vecinii lor cei mai apropiați.
• relativ poziționate (relative) și lipite (lipicioase) își păstrează locul în flux și vecinii lor cei mai apropiați nu îl ocupă. Cu toate acestea, umplutura acestor elemente nu ocupă spațiu, ci este complet ignorată de alte elemente și acest lucru poate duce la suprapunerea elementelor.
• elementele fixe (iar poziționarea fixă ​​este un tip de absolut) sunt întotdeauna poziționate relativ la zona de vizibilitate (ignorând prezența poziționării în strămoși), în timp ce elementele lipicioase sunt poziționate față de cel mai apropiat strămoș cu derulare (overflow: auto). Și numai în absența unor astfel de strămoși sunt poziționați în raport cu zona de vizibilitate.

Puteți vedea acest lucru mai detaliat în demo:

Notă: Poziționarea lipită este încă o tehnologie experimentală cu suport limitat în browsere. Desigur, dacă doriți, puteți utiliza un polyfill pentru a adăuga această funcționalitate în browser, dar având în vedere prevalența sa scăzută, această proprietate nu va fi discutată în articol.

Elemente de poziționare cu tip de poziționare absolută

Sunt sigur că majoritatea oamenilor știu cum funcționează poziționarea absolută. Cu toate acestea, multe lucruri despre el îi pot deruta pe începători.

Prin urmare, am decis să încep cu el atunci când descriu caracteristicile puțin cunoscute ale poziționării.

Deci, un element poziționat absolut este compensat față de strămoșul său poziționat cel mai apropiat. Desigur, acest lucru funcționează dacă oricare dintre strămoși are o poziție diferită de statică - dacă elementul nu are strămoși poziționați, este decalat în raport cu zona de vizibilitate.

Acest lucru este demonstrat de următorul exemplu:

În această demonstrație, blocul verde este poziționat inițial absolut cu zero padding bottom:0 și left:0, strămoșul său (blocul roșu) nu a fost poziționat deloc.

Totuși, am poziționat relativ învelișul exterior (un element cu clasa jumbotron). Observați cum se schimbă poziționarea blocului verde când se schimbă tipul de poziționare al strămoșilor săi.

Elementele poziționate absolut ignoră proprietatea float

Dacă aplicăm poziționare absolută sau fixă ​​unui element plutit, proprietatea float va fi setată la none . Pe de altă parte, dacă setăm poziționarea relativă, elementul va rămâne plutitor.

Aruncă o privire la demonstrația corespunzătoare:

În acest exemplu, definim două elemente diferite care plutesc spre dreapta. Rețineți că atunci când un bloc roșu devine poziționat absolut, ignoră valoarea proprietății float, în timp ce un bloc verde poziționat relativ păstrează valoarea float.

Elementele inline poziționate absolut devin elemente bloc

Un element inline cu poziționare absolută sau fixă ​​preia proprietățile unui element bloc. Conversia elementelor inline în elemente bloc este descrisă mai detaliat în tabel.

În acest caz, am creat două elemente diferite. Primul (blocul verde) este un element bloc, iar al doilea (blocul roșu) este un element în linie. Inițial, doar blocul verde este vizibil.

Caseta roșie nu este vizibilă deoarece proprietățile sale de lățime și înălțime funcționează doar cu elemente de bloc și bloc inline și, deoarece nu are conținut, nu are nicio dimensiune.

Când atribuiți o poziție absolută sau fixă ​​unui bloc roșu, acesta devine un bloc bloc și dimensiunile blocului specificate în acesta intră în vigoare.

Elementele poziționate absolut nu au colaps de căptușeală

În mod implicit, când două margini verticale se ating, acestea sunt combinate într-una egală cu maximul dintre ele. Aceasta se numește colapsul marginii.

Comportamentul elementelor poziționate absolut aici este similar cu elementele plutitoare - căptușeala lor nu este combinată cu vecinii săi.

În această demonstrație, elementului i se oferă o umplutură de 20 de pixeli. Căptușeala sa se prăbușește cu umplutura elementului părinte, care este, de asemenea, de 20 de pixeli. După cum puteți vedea, doar cu poziționare absolută nu există colaps.

Dar cum putem preveni prăbușirea marjelor? Trebuie să punem un fel de separator între ei.

Aceasta poate fi umplutură sau chenar și poate fi aplicată atât elementelor părinte, cât și elementelor secundare. O altă opțiune este să adăugați un clearfix elementului părinte.

Poziționarea elementelor cu pixeli și procente

Ați folosit vreodată procente în loc de pixeli pentru a poziționa elementele? Dacă răspunsul este da, atunci știi că offset-ul unui element depinde de unitățile alese (pixeli sau procente).

Este puțin confuz, nu-i așa? Deci, mai întâi, să vedem ce spune specificația despre compensarea procentuală:

Offset ca procent din lățimea (pentru stânga și dreapta) sau înălțimea (sus sau jos) blocului părinte. Pentru elementele lipite, decalajul este calculat ca procent din lățimea (pentru stânga și dreapta) sau înălțimea (sus sau jos) a fluxului. Valorile negative sunt acceptabile.

După cum sa menționat, atunci când setați offset-ul ca procent, poziția elementului depinde de lățimea și înălțimea părintelui său.

Demo-ul arată această diferență:

Acest exemplu folosește pixeli și procente pentru offset. Desigur, atunci când specificați un offset în pixeli, elementul este mutat acolo unde este necesar.

Și dacă alegem un procent pentru offset, rezultatul va depinde de dimensiunea elementului părinte. Iată o vizualizare care arată cum este calculată noua poziție:

Notă: După cum probabil știți, proprietatea de transformare (împreună cu diferitele funcții de traducere) vă permite, de asemenea, să schimbați poziția unui element. Dar, în acest caz, atunci când se utilizează procente, calculul se va baza pe dimensiunea elementului în sine, și nu pe părintele său.

Concluzie

Sper că acest articol v-a ajutat să înțelegeți mai bine poziționarea în CSS și a clarificat unele dintre provocări.