Poziţionarea elementelor. CSS - Elemente de bloc de poziţionare

De la autor: Salutări. Poziționarea elementelor CSS este un subiect foarte important în construirea site-ului web. În acest articol, îmi propun să-l privim mai în detaliu, toate modalitățile de a muta blocuri în jurul unei pagini web.

Care sunt tipurile

Dacă vorbim despre poziționarea elementelor bloc, aceasta se setează folosind proprietatea poziție. Are patru semnificații și fiecare merită o analiză separată.

Poziționare absolută

Aceasta este prima specie cunoscută. Se setează astfel: poziție: absolută. După aceasta, blocul își pierde proprietățile obișnuite și cade complet din fluxul normal. Ce este acest flux? Încercați să plasați mai multe elemente de bloc la rând în marcaj. Cum vor deveni? Unul după altul, și nici un alt mod.

Acesta este comportamentul normal al blocurilor în mod implicit. Dar ce se întâmplă cu un bloc care are poziționarea absolută definită? Iese complet din fluxul normal, alte blocuri pur și simplu încetează să-l observe, de parcă n-ar fi existat niciodată, dar elementul rămâne pe pagină. Poziționarea absolută în CSS este adesea folosită pentru plasarea precisă a elementelor decorative, pictogramelor și alte elemente de design.

Acum poate fi mutat folosind proprietățile din stânga, dreapta, sus și jos. În mod implicit, mișcarea este relativă la marginile ferestrei browser, dar dacă elementul părinte are poziție: relativă, atunci mișcarea este relativă la blocul părinte.

Bloc (poziție: absolut; jos: 0; dreapta: 0; )

Bloc ( poziție: absolută; jos: 0; dreapta : 0 ;

Elementul va fi mutat în colțul din dreapta jos. Observ că deseori fac butonul de sus în acest fel - îl plasează doar în colț. Iată un alt exemplu în care voi arăta mai întâi posibilul markup:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

Și acum stilurile CSS pentru acest fragment:

#wrapper( poziție: relativ; ) .block( poziție: absolut; sus: 0; dreapta: 10px; )

#wrapper( poziție: relativă; Bloc ( poziție: absolută; sus: 0; dreapta: 10px;

În acest exemplu, am atribuit mai întâi o poziționare relativă containerului părinte (relativ - mai multe despre asta mai târziu în articol), apoi am stabilit poziționarea absolută pentru același element.block. În consecință, coordonatele vor fi numărate nu din fereastra browserului în sine, ci de la marginile elementului părinte, adică blocul wrapper.

Poziționarea relativă a elementelor css

Acesta este următorul tip și se scrie așa – poziție: relativă. Coordonatele sunt specificate de aceleași proprietăți ca și pentru poziția absolută. Singura diferență semnificativă este că elementul nu cade în mod oficial din flux - rămâne spațiu pentru el.

Funcționarea acestei valori poate fi comparată cu vizibilitatea: ascuns, când elementul este ascuns de pagină, dar spațiul de sub acesta rămâne neatins. Același lucru se întâmplă cu plasarea relativă - blocul poate fi mutat oriunde, dar spațiul pentru acesta rămâne gol și nu va fi ocupat de alte părți.

De asemenea, este important să știți că offset-ul nu are loc de la marginile ferestrei browserului web, ci de la locul în care a stat inițial blocul. Acesta este:

Blocare (poziție: relativă; sus: 10px; dreapta: 50px; )

Bloc ( poziție: relativă; sus: 10px; dreapta: 50px;

Blocul se va deplasa cu 50 de pixeli la dreapta și 10 la stânga.

Fixare

Probabil ați văzut de mai multe ori pe site-uri de pe Internet când, la derulare, un banner nu a dispărut, ci a continuat să fie în zona dvs. de vizibilitate, parcă blocat într-un singur loc. Acest lucru este implementat în principal folosind poziționare fixă. Pentru a face acest lucru trebuie să scrieți:

Poziție: poziție statică sau normală

Ultimul tip este static, acesta este comportamentul obișnuit al elementelor bloc. Nu este necesar să fie specificat, deoarece este implicit, dar mai trebuie să știți despre a patra valoare. Uneori poziție: static este scris pentru a înlocui un alt tip de poziționare atunci când anumite evenimente au loc pe o pagină web.

Cum să poziționez corect blocurile în css?

Am discutat despre semnificații, dar acest lucru nu este suficient pentru a închide acest subiect pentru noi înșine. De fapt, trebuie să înțelegeți unde și ce tipuri de poziționare trebuie aplicate. V-am dat deja un exemplu cu fix - poate fi folosit pentru a crea coloane laterale lipicioase, anteturi sau subsoluri.

Poziționarea relativă va ajuta atunci când trebuie să mutați ușor un bloc în raport cu poziția sa și, în același timp, să-i mențineți locul în flux. De asemenea, este dat blocurilor părinte să folosească mișcarea absolută pentru elementele copil.

Alte tehnici: centrare, blocuri flotante

Proprietatea poziției nu rezolvă toate problemele legate de plasarea elementelor bloc. Cum ați crea, de exemplu, o grilă de site folosind-o? Nu am idei bune. Aici vin alte proprietăți în ajutor.

Grilele sunt adesea realizate folosind floats în CSS. Proprietatea vă permite să apăsați un bloc la marginea stângă sau dreaptă a părintelui (float: left, float: right), permițând mai multor elemente de bloc să se alinieze într-o singură linie, ceea ce este comun pe orice site.

Centrarea se face astfel: blocul trebuie să scrie o anumită lățime și apoi să seteze marja: 0 proprietate auto. Este valoarea automată care o va alinia orizontal exact în centru. Desigur, pentru aceasta trebuie să fie singurul din linia sa, altfel nimic nu va funcționa.

Toate tipurile de poziționare enumerate în acest articol pot fi utile unui dezvoltator web. Undeva trebuie să inserați o pictogramă (poziție: absolut), undeva trebuie să ajustați ușor poziția blocului, lăsând puțin spațiu în spate (poziția: relativă), iar undeva trebuie să fixați widget-ul (poziția: fix). În general, cunoașterea acestei proprietăți cu siguranță nu va fi de prisos.

Ei bine, pentru a afla și mai multe din lumea construcției site-urilor web, asigurați-vă că vă abonați la blogul nostru și primiți noi materiale de instruire. Vă sfătuiesc să vă uitați și la al nostru, unde se pune și un subiect asemănător. (pozitionarea elementelor)

Vlad Merjevici

Poziționarea este poziția unui element într-un sistem de coordonate. Există patru tipuri de poziționare: normală, absolută, fixă ​​și relativă. În funcție de tip, care este setat prin proprietatea poziție, sistemul de coordonate se modifică și el.

Datorită combinației dintre proprietățile poziției, stânga, sus, dreapta și jos, un element poate fi suprapus unul peste altul, afișat într-un punct cu anumite coordonate, fixat într-o locație specificată, determina poziția unui element față de altul, etc. Ca și alte proprietăți CSS, controlul poziționării este disponibil prin scripturi. Astfel, poți schimba dinamic poziția elementelor fără a reîncărca pagina, creând animație și diverse efecte.

Poziționare normală

Dacă proprietatea de poziție a unui element nu este setată sau valoarea sa este statică, elementul este redat în fluxul de document ca de obicei. Cu alte cuvinte, elementele apar pe pagină în ordinea în care apar în codul sursă HTML.

Proprietățile stânga, sus, dreapta, jos, dacă sunt definite, sunt ignorate.

Poziționare absolută

Cu poziționarea absolută, elementul nu există în fluxul de documente și poziția sa este setată relativ la marginile browserului. Puteți seta acest tip prin valoarea absolută a proprietății de poziție. Coordonatele sunt specificate în raport cu marginile ferestrei browser, numită „zona vizibilă” (Fig. 3.42).

Orez. 3.42. Valorile proprietăților stânga, dreapta, sus și jos pentru poziționarea absolută

Modul este caracterizat de următoarele caracteristici.

• Lățimea stratului, cu excepția cazului în care este specificat în mod explicit, este egală cu lățimea conținutului plus valorile de margine, chenar și umplutură.
• Un strat nu își schimbă poziția inițială decât dacă are proprietățile dreapta, stânga, sus și jos.
• Proprietățile din stânga și de sus au prioritate față de proprietățile din dreapta și de jos. Dacă stânga și dreapta se contrazic reciproc, atunci valoarea dreptei este ignorată. Același lucru este valabil și pentru partea de jos.
• Dacă stânga este setată la o valoare negativă, stratul va depăși marginea din stânga a browserului și bara de defilare nu va apărea. Aceasta este o modalitate de a ascunde un element din vedere. Același lucru este valabil și pentru proprietatea de sus, doar stratul va depăși marginea superioară.
• Dacă stânga este setată la o valoare mai mare decât lățimea zonei vizibile sau dreapta este setată la o valoare negativă, va apărea o bară de defilare orizontală. O regulă similară funcționează cu top , doar că vom vorbi despre o bară de derulare verticală.
• În același timp, proprietățile specificate din stânga și din dreapta formează lățimea stratului, dar numai dacă lățimea nu este specificată. Odată ce adăugați proprietatea width, valoarea corectă va fi ignorată. Același lucru se va întâmpla cu înălțimea stratului, fiind implicate doar proprietățile de sus, de jos și de înălțime.
• Un element poziționat absolut se mișcă odată cu documentul pe măsură ce se derulează.

Proprietatea de poziție, setată la absolut, poate fi utilizată pentru a crea un efect de cadru. Pe lângă poziționarea absolută pentru elemente, trebuie să atribuiți proprietății overflow cu valoarea auto . Apoi, când conținutul depășește înălțimea zonei vizibile, va apărea o bară de defilare. Înălțimea și lățimea „cadrelor” sunt generate automat prin utilizarea simultană a proprietăților stânga , dreapta pentru lățime și sus , jos pentru înălțime (exemplul 3.31).

Exemplul 3.31. Crearea unui analog de cadre

Corp de poziționare absolută ( margine: 0; ) #bară laterală, #conținut (poziție: absolut; ) #bară laterală, #conținut (overflow: automat; padding: 10px; ) #header (înălțime: 80px; /* Înălțimea stratului */ fundal: #FEDFC0; chenar-jos: 2px solid #7B5427; ) #header h1 ( umplutură: 20px; marjă: 0; ) #sidebar ( lățime: 150px; fundal: #ECF5E4; chenar dreapta: 1px solid #231F20; sus: 82px ; /* Distanța de la marginea de sus */ jos: 0; /* Distanța de la partea de jos */ ) #conținut ( sus: 82px; /* Distanța de la marginea de sus */ stânga: 170px; /* Distanța de la marginea din stânga */ jos: 0 ; dreapta: 0; ) Pilaf al popoarelor lumii

Pilaf în stil Fergana

pilaf uzbec

pilaf siberian

pilaf italian

pilaf estonian

Pilaf în stil american

Pilaf în stil indian

Pilaf în stil Fergana

Puneți carnea tăiată bucăți într-un ceaun și prăjiți-o până se formează o crustă. Prăjiți ceapa, tăiată rondele, împreună cu carnea până la culoarea roșiatică, apoi adăugați morcovii tăiați fâșii. Adăugați jumătate din sare, amestecați totul și prăjiți până când morcovii devin maro auriu. După aceasta, turnați jumătate din cantitatea necesară de apă și lăsați-o să fiarbă.

Acoperiți orezul într-un strat uniform, măriți focul și turnați imediat apă, astfel încât să acopere orezul cu 1–1,5 cm.De îndată ce apa s-a evaporat, folosiți o lingură cu fantă pentru a colecta pilaful într-o movilă spre mijloc. , străpungeți-l cu un băț în mai multe locuri, astfel încât apa de la suprafață, să ajungă la fund. Apoi acoperiți pilaf-ul și lăsați-l să se odihnească timp de 20-25 de minute.

Se amestecă bine pilaful finit, se transferă într-un vas mare și se așează carnea deasupra.

Rezultatul acestui exemplu este prezentat în Fig. 3.43. Stratul antet este redat în flux ca de obicei, iar bara laterală și straturile de conținut sunt poziționate absolut.

Orez. 3.43. Aplicarea poziționării absolute

În IE6, elementele poziționate absolut nu pot avea proprietăți stânga, dreapta și sus și jos simultan.

Poziționarea absolută este, de asemenea, utilizată pentru a crea diverse efecte, cum ar fi sfaturi pentru instrumente foto. Spre deosebire de atributul title al etichetei care afișează și textul tooltip, prin stiluri poți controla tipul de text afișat folosind scriptul.

Mai întâi, să creăm un strat gol cu ​​identificatorul floatTip și să definim stilul acestuia. Trebuie să fie necesare trei proprietăți de stil - poziție cu o valoare absolută , afișarea cu o valoare nu ascunde stratul, iar lățime setează lățimea stratului cu un tooltip. Proprietățile rămase sunt utilizate la cererea dezvoltatorului și au scopul de a schimba designul stratului (exemplul 3.32).

Exemplul 3.32. Stilul balon instrument

#floatTip ( poziție: absolut; /* Poziționare absolută */ lățime: 250px; /* Lățime bloc */ afișare: niciuna; /* Ascundere de afișare */ chenar: 1px solid #000; /* Parametri cadru */ padding: 5px ; /* Margini din jurul textului */ font-family: sans-serif; /* Serif font */ font-size: 9pt; /* Dimensiunea fontului */ culoare: #333; /* Culoare text */ fundal: #ECF5E4; /* Culoare de fundal */ )

Scriptul în sine constă din două funcții - moveTip() urmărește mișcarea mouse-ului și schimbă poziția stratului în conformitate cu coordonatele cursorului, iar toolTip() controlează vizibilitatea stratului și afișează textul dorit în acesta (exemplul 3.33).

Exemplul 3.33. Script de ieșire layer

Document.onmousemove = moveTip; funcția moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Lățimea stratului // Pentru browser IE dacă (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Pentru alte browsere ) else ( x = e.pageX; // Coordonata X a cursorului y = e.pageY; // Coordonata Y a cursorului ) // Afișați stratul din dreapta cursorului dacă ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Pentru comoditate și versatilitate, scriptul trebuie plasat într-un fișier separat și conectat prin atributul src al etichetei. Codul final este prezentat în Exemplul 3.34.

Exemplul 3.34. Crearea unui tooltip

Tooltip #floatTip ( poziție: absolut; lățime: 250px; afișare: niciunul; chenar: 1px solid #000; umplutură: 5px; font-family: sans-serif; font-size: 9pt; culoare: #333; fundal: # ECF5E4 ; opacitate: 0,85; /* Transparența stratului */ )

" + "Obiectiv: Canon EF 24-105 f/4L IS USM
" + "Bliț: Canon Speedlite 580 EX
" + "Viteza de expunere: 1/125
Diafragma: 5,6")" onmouseout="toolTip()" />

Rezultatul acestui exemplu este prezentat în Fig. 3.44. Vă rugăm să rețineți că împachetarea textului la apelarea funcției toolTip() este în scopuri de lizibilitate și este în sintaxa JavaScript. În Safari, scriptul uneori nu funcționează atunci când împachetați textul, caz în care textul ar trebui să fie scris pe o singură linie. O proprietate de opacitate CSS3 a fost adăugată stilurilor, ceea ce adaugă o ușoară transparență stratului. Această proprietate nu este acceptată în IE înainte de versiunea 9.0.

Orez. 3.44. Balon explicativ redat folosind JavaScript

Poziție fixă

Poziția fixă ​​a unui strat este specificată de valoarea fixă ​​a proprietății de poziție și este similară ca efect cu poziționarea absolută. Dar, spre deosebire de acesta, se leagă de punctul de pe ecran specificat de proprietățile stânga, sus, dreapta și jos și nu își schimbă poziția atunci când derulați pagina web. O altă diferență față de absolut este că atunci când un strat fix depășește zona vizibilă în dreapta sau sub ea, nu apar bare de defilare.

Acest tip de poziționare este folosit pentru a crea meniuri, file, anteturi, în general, orice elemente care ar trebui să fie fixate pe pagină și mereu vizibile pentru vizitator. Exemplul 3.35 arată adăugarea unui subsol care rămâne într-un singur loc, indiferent de cantitatea de informații de pe site.

Exemplul 3.35. Subsol fix

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Subsol fix BODY ( margin-bottom: 50px; ) #footer (poziție: fix; /* Poziție fixă ​​*/ stânga: 0; jos: 0; /* Colț din stânga jos */ padding: 10px; /* Margini în jurul textului */ fundal: #39b54a; /* Culoare fundal */ culoare: #fff; /* Culoare text */ lățime: 100%; /* Lățime strat */ ) Toate metodele de prindere a leului enumerate pe site sunt teoretice și se bazează pe metode de calcul. Autorul nu vă garantează siguranța atunci când le utilizați și își declină orice responsabilitate pentru rezultate. Amintiți-vă, un leu este un prădător și un animal periculos! Vlad Merjevici

Rezultatul exemplului este prezentat în Fig. 3.45. Deoarece subsolul fix suprapune și ascunde textul, a fost adăugată o umplutură de jos pentru selectorul BODY. IE6 nu acceptă valoarea fixă, așa că acest exemplu nu va funcționa corect acolo.

Orez. 3.45. Subsol în partea de jos a paginii

Poziționare relativă

Setarea proprietății de poziție la relativă stabilește poziția elementului în raport cu locația sa inițială. Adăugarea proprietăților stânga , sus , dreapta și jos modifică poziția elementului și îl mută într-o parte sau alta din locația sa inițială. O valoare pozitivă la stânga specifică o deplasare la dreapta de la marginea din stânga a elementului, o valoare negativă specifică o deplasare la stânga. O valoare pozitivă a lui top specifică o deplasare în jos a elementului (Fig. 3.46), o valoare negativă specifică o deplasare în sus.

Orez. 3.46. Valorile proprietăților din stânga și de sus pentru poziționarea relativă

Proprietățile de jos și din dreapta au efectul opus. Cu o valoare pozitivă, dreapta deplasează elementul la stânga marginii sale drepte, cu o valoare negativă, îl deplasează spre dreapta (Fig. 3.47). O valoare de jos pozitivă mută elementul în sus, o valoare de jos negativă îl mută în jos.

Orez. 3.47. Valorile proprietăților din dreapta și de jos pentru poziționarea relativă

Poziționarea relativă se caracterizează prin următoarele caracteristici.

• Acest tip de poziționare nu se aplică elementelor de tabel precum celule, rânduri, coloane etc.
• Când un element este deplasat față de poziția sa inițială, spațiul pe care elementul îl ocupa rămâne gol și nu este umplut de elementele de dedesubt sau de deasupra lui.

Exemplul 3.36 arată textul titlului care se deplasează în jos pentru a-i oferi un stil diferit de scriere.

Exemplul 3.36. Titlul textului

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlu H1 ( font: bold 2em Arial, Tahome, sans-serif; /* Opțiuni font */ culoare: #fff; fundal: #375D4C; umplutură: 0 10px; ) H1 SPAN (poziție: relativă; /* Poziționare relativă */ sus: 0.3em; /* Mutare în jos */ ) Az și fagi de știință font

Un font este un mijloc de exprimare a designului, nu un fel de lectură banală.

Rezultatul acestui exemplu este prezentat în Fig. 3.48.

Orez. 3.48. Schimbați textul față de poziția inițială

Straturi imbricate

De obicei, poziționarea relativă în sine nu este folosită des, deoarece există o serie de proprietăți care îndeplinesc de fapt același rol, de exemplu, aceeași marjă. Dar combinarea diferitelor tipuri de poziționare pentru straturi imbricate este una dintre tehnicile de layout convenabile și practice. Dacă setați relativă pentru elementul părinte și absolută pentru elementul copil, atunci sistemul de coordonate se schimbă și poziția elementului copil este indicată în raport cu părintele său (Fig. 3.49).

Orez. 3.49. Valorile proprietăților din stânga, dreapta, sus și jos în straturi imbricate

Coordonatele sunt numărate de la marginea interioară a graniței; valorile câmpului nu sunt luate în considerare. Următorul exemplu plasează textul în colțul din dreapta jos al stratului, lângă margine, ignorând proprietatea de umplutură.

Text

Relație (poziția: relativă; ) .galben (poziția: absolut; dreapta: 10px; jos: 10px; )

Relație poziție: relativă; Galben poziție: absolută; dreapta: 10px; jos: 10px;

În acest exemplu, am folosit proprietățile din dreapta și de jos pentru a seta decalajul față de marginile din dreapta și de jos. Aceste valori de proprietate sunt echivalente cu valorile de sus: Înălțimea elementului - 10px și stânga: Lățimea elementului - 10px.

De asemenea, poziționarea absolută este uneori folosită atunci când este necesar să „impactezi” un element pe altul.

Poziționare statică (statică)

Cel mai comun tip de poziționare care apare pe fiecare pagină și este de obicei setat pentru majoritatea elementelor este static, scris în css ca static. Pentru majoritatea etichetelor HTML, această valoare este definită implicit, adică dacă poziția nu este specificată în mod explicit, valoarea va fi statică. Cu această aranjare, elementele sunt aliniate unul sub celălalt iar coordonatele din fereastra fiecărui element depind de elementele cele mai apropiate cu poziție: static sau poziție: relativă. Proprietățile de sus, stânga, dreapta, jos nu vor funcționa cu această poziționare; poziția este modificată datorită proprietății marginii.

Poziționare relativă

Acest tip de poziționare este foarte asemănătoare cu poziționarea statică, cu excepția faptului că poziția elementului poate fi schimbată cu proprietățile sus, stânga, dreapta, jos și margine.

Poziționare fixă

Poziționarea fixă ​​este similară cu poziționarea absolută în ceea ce privește modul în care sunt specificate coordonatele, dar locația este calculată nu în raport cu pagina HTML, ci în raport cu fereastra browserului, de exemplu. cu proprietatea top: 10px, veți seta marginea superioară la 10px DIN FEREASTRA BROWSERULUI și indiferent de nivelul de derulare a paginii la care vă aflați, acest element va urma întotdeauna ecranul dvs.

Folosit de obicei pentru elemente de navigare, astfel încât utilizatorul să aibă întotdeauna la vedere informații importante sau link-uri către pagini interesante.

Î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ă trecem în revistă pe scurt elementele de bază ale diferitelor tipuri de 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:

• dreapta
• fund
• Valoarea inițială a acestor proprietăți este cuvântul 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 elementului lipicios 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ă vreunul 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.

Cu toate acestea, 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, acesta 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 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.

Acestea funcționează cu toate elementele poziționate, cu excepția celor statice.

Exemplu de pozitionare.

Elementele se pot suprapune între ele! Afișarea unui element deasupra restului!

Proprietatea poziției are 4 valori: statică, fixă, relativă și absolută. Fiecare dintre aceste semnificații va fi demonstrată mai jos cu un exemplu de utilizare.

Înainte de a examina în detaliu toate tipurile de poziționare a elementelor pe o pagină, va trebui să luăm în considerare ce este fluxul de documente.

Fluxul documentelor

În mod implicit, elementele de pe o pagină web sunt afișate în ordinea în care apar în documentul HTML, adică elementele bloc ocupă toată lățimea disponibilă și sunt stivuite vertical unul sub celălalt. Elementele inline sunt aliniate orizontal până când toată lățimea disponibilă este ocupată, după ce toată lățimea este ocupată, se face o întrerupere de linie și totul începe din nou. Acest aranjament de elemente se numește flux normal (numit și flux de documente sau flux general).

Puteți utiliza proprietatea float sau position pentru a elimina un element din fluxul normal. Dacă un element „cade” din fluxul normal, atunci elementele care sunt situate în codul de sub acel element vor fi mutate în locul său pe pagina web.

Poziționare statică

Static este poziționarea implicită pentru toate elementele dintr-o pagină web. Dacă nu aplicați proprietatea poziției unui element, acesta va fi static și va apărea pe pagina web în funcție de fluxul general de elemente.

Când se aplică proprietățile CSS sus , stânga , dreapta sau jos unui element poziționat static, acestea vor fi ignorate.

Dacă este necesar, puteți seta poziționarea statică în foaia de stil folosind valoarea statică:

Titlul documentului p (poziție: static; )

Primul paragraf.

Al doilea paragraf.

Încerca "

Poziționare fixă

Elementele cu poziționare fixă ​​sunt situate pe pagina relativă la fereastra browserului. Astfel de elemente sunt eliminate din fluxul general; elementele care urmează elementului fix în flux îl vor ignora, mișcându-se și luându-și locul pe pagina web.

Merită să acordați atenție faptului că elementele cu poziționare fixă ​​se pot suprapune cu alte elemente, ascunzându-le complet sau parțial. Când parcurgeți paginile lungi, acestea creează efectul ca obiectele nemișcate rămânând în același loc:

Titlul documentului img (poziție: fix; sus: 5%; stânga: 40%) Text Text Text Text Text Text Text Text Text Text Text Text Text Încercați »

Poziționare relativă

Elementele cu poziționare relativă, ca și elementele statice, rămân în fluxul general. Când aplicați proprietățile de sus , stânga , dreapta sau de jos elementelor poziționate relativ, acestea se vor deplasa în raport cu locația lor, lăsând spațiu gol acolo unde elementul a fost localizat inițial.

Astfel de elemente nu afectează poziția elementelor din jurul lor; elementele rămase rămân pe loc și pot fi suprapuse de un element relativ poziționat:

Titlul documentului h2 (poziție: relativă; sus: 30px; ) Antet de primul nivel. Titlu relativ pozitionat. Titlu de nivel al treilea. Încerca "

Notă: Elementele relative sunt de obicei folosite ca părinte pentru elementele absolute.

Poziționare absolută

Elementele poziționate absolut sunt îndepărtate complet din fluxul general, elementele rămase vor ocupa spațiul liber, ignorând complet elementele poziționate absolut. Apoi, puteți poziționa elementul oriunde doriți pe pagina web folosind proprietățile de sus , stânga , dreapta sau de jos.

Toate elementele poziționate absolut sunt plasate relativ la fereastra browserului sau relativ la cel mai apropiat strămoș poziționat (dacă există unul) care are o proprietate de poziție absolută , fixă ​​sau relativă .

Imagine titlu document (poziție: absolut; dreapta: 0px; sus: 0px; )

Să schimbăm locația logo-ului folosind poziționarea absolută.
Logo-ul va fi acum situat în colțul din dreapta sus al paginii.

Încerca "

Elemente suprapuse

Când elementele sunt în afara fluxului general al paginii, ele se pot suprapune. În mod obișnuit, ordinea elementelor corespunde ordinii lor în codul HTML al paginii, totuși, este posibil să se controleze ordinea de suprapunere folosind proprietatea CSS z-index , cu cât valoarea acesteia este mai mare, cu atât elementul va fi mai mare.

Titlul documentului div (poziție: absolut; lățime: 100px; înălțime: 100px; ) .div1 (culoarea fundalului: #66FFFF; stânga: 70px; sus: 0px; z-index: 1; ) .div2 (culoarea fundalului: # FFFF66; stânga: 0px; sus: 30px; z-index: 0; ) .div3 (culoare fundal: #66FF66; stânga: 33px; sus: 60px; z-index: 2; ) z-index: 1; indicele z: 0; indicele z: 2;