,

,

,

. Etichetă
destul de des folosit în aspectul site-urilor moderne pentru a crea grile și înseamnă pur și simplu un fel de bloc sau container. Este permisă încorporarea altor etichete în el, ceea ce nu este posibil cu toate elementele bloc, prin urmare
convenabil de utilizat. Blocurile sunt de obicei stivuite unul peste altul și nu sunt imbricate în elementele inline. Elementele HTML inline sunt text, iar CSS este folosit pentru stil.
Cu o lățime de conținut dată, lățimea totală a blocului este suma umpluturii din dreapta și din stânga, a marginilor, a marginilor și a lățimii. Înălțimea dată - de la umplutură de sus și de jos, margini, margini și înălțime. Textul din elementele bloc este aliniat la stânga în mod implicit. Dacă unul dintre ele conține elemente inline împreună cu elemente bloc, atunci se creează un bloc anonim în jurul elementelor inline. Va folosi stilul implicit. De asemenea, va moșteni stilul dat atribuit părintelui său.
Fluxul documentelor
Fluxul se referă la ordinea în care sunt afișate elementele paginii, determinată de proprietățile specificate în CSS. În același timp, în mod implicit, blocurile sunt aliniate de sus în jos, iar etichetele inline, dacă nu există suficient spațiu, sunt transferate pe o nouă linie și sunt situate de sus în jos și de la stânga la dreapta. Poziția unui element pe pagină depinde de locul său în cod: cu cât este mai sus, cu atât este localizat mai devreme. Fiecare dintre elementele blocului arată ca un dreptunghi care le împinge pe cele vecine departe de sine. Puteți modifica acest comportament folosind proprietăți speciale. Alinierea în CSS a anumitor cutii la centrul sau laturile containerului se numește poziționare.
Elemente de poziționare
Poziția blocurilor poate fi controlată folosind poziționarea absolută și relativă. Poziționarea este folosită pentru a oferi secțiunilor mari de pe pagină un anumit loc, pentru a crea interfețe complexe, ferestre pop-up și elemente decorative. Proprietatea principală folosită pentru poziționarea blocurilor în CSS este poziția. Are patru proprietăți principale:
• relativ;
• absolut;
• fix;
• static.
Cu ajutorul lor, puteți schimba modurile de aspect setând unul dintre cei patru parametri: sus, dreapta, jos sau stânga. Există, de asemenea, o proprietate pentru ordonarea straturilor - z-index. Poziționarea cu proprietatea statică nu este în general utilizată, deoarece indică poziționarea implicită a blocurilor. Prin urmare, utilizarea oricăror parametri nu îl afectează în niciun fel. Celelalte trei proprietăți sunt folosite pentru aspect: relativă, absolută, fixă.
Poziționare relativă
Poziționarea relativă a blocurilor în CSS, adică poziția: proprietatea relativă, înseamnă că elementul poate fi mutat și poziția inițială schimbată. Un astfel de bloc rămâne încă în flux. De fapt, nu el este deplasat, ci copia lui. Valorile proprietăților sunt setate pentru a specifica exact cât de mult se va mișca blocul într-o direcție sau alta. Ele sunt de obicei măsurate în pixeli. Dar este acceptabil să folosiți alte unități.

Utilizarea proprietăților în poziționarea relativă
Proprietatea de sus mută o copie a unui anumit bloc în sus sau în jos cu numărul de pixeli specificat în proprietate. Când îl utilizați, elementele situate dedesubt sau deasupra rămân la locul lor, deoarece, de fapt, blocul deplasat nu se mișcă nicăieri.
Proprietatea de jos compensează blocul în direcția opusă proprietății de sus. O valoare pozitivă ajută la mutarea acesteia în sus, iar o valoare negativă o ajută la deplasarea în jos. Proprietățile dreapta și stânga deplasează elementul la dreapta și, respectiv, la stânga. Combinându-le pe toate, puteți seta locația exactă a blocului pe pagină, deplasându-l de-a lungul axelor de coordonate verticale și orizontale. Dacă măriți indentațiile, acestea vor fi calculate nu de la marginea blocului în sine, ci din copia acestuia deplasată în lateral.

Poziționare absolută
Poziționarea absolută a casetelor în CSS este dată de valoarea absolută a proprietății poziției. Un element care este poziționat absolut iese din fluxul documentului, iar blocurile adiacente îi iau locul. Lățimea unui astfel de element este întinsă în funcție de conținutul său și poate fi mutată prin setarea anumitor valori în proprietățile de sus, stânga, dreapta, jos. Poziționarea absolută a blocurilor în CSS este utilă pentru titluri. Dar poziție: absolute funcționează nu numai pentru elementele bloc, ci și pentru elementele inline.
Elemente centrale
Un element pozitionat absolut inline se va comporta exact ca un element inline. Prin urmare, cu ajutorul poziționării, puteți controla în CSS și text. Puteți aplica câteva proprietăți noi, cum ar fi modificarea înălțimii și lățimii. Centrarea și alinierea verticală în CSS utilizează o combinație de mai multe proprietăți. Controlează alinierea verticală a proprietății de sus. Dacă doriți să centrați un bloc în CSS, containerul principal trebuie să fie poziționat relativ, iar elementul aliniat trebuie să fie poziționat absolut. Containerul ar trebui să fie setat la vârf: 50% și pentru a muta elementul pe jumătate din înălțimea sa, utilizați proprietatea translate cu o valoare de „0, -50%”. Elementele poziționate absolut pot fi distinse într-un tip nou, deoarece au proprietăți care nu sunt disponibile pentru alte tipuri de poziționare.

Poziționare în raport cu colțul din stânga sus al browserului
Proprietățile din stânga, sus, dreapta și jos funcționează diferit cu elementele poziționate absolut și relativ. Pentru elementele relative, aceste proprietăți specifică un decalaj relativ la locul în care se află elementul. Cele poziționate absolut ocupă spațiu în raport cu un anumit sistem de coordonate legat de dimensiunea ferestrei browserului. Punctele de plecare ale acestui sistem sunt colțurile ferestrei. Când utilizați proprietatea stânga, umplutura va fi măsurată din partea stângă a browserului, dar bara de derulare nu va apărea. Proprietatea de sus, când este poziționată absolut, setează umplutura din partea de sus a browserului până în partea de sus a elementului căruia i se aplică. Prin combinarea ambelor proprietăți, elementul poate fi mutat în raport cu colțul din stânga sus al browserului.

Poziționare relativ la colțul din dreapta sus al browserului
În mod similar, folosind proprietățile din dreapta și de sus, puteți fixa un element în partea dreaptă a ferestrei browserului și puteți modifica poziția acestuia pe verticală, deplasându-l în colțul din dreapta sus. Dacă valoarea proprietății drepte este negativă, blocul va fi mutat dincolo de marginea ferestrei. După aceea, ar trebui să apară o bară de defilare. Pentru a muta un element în jos, utilizați proprietatea de jos. Setează umplutura de la marginea de jos a ferestrei browserului până la partea de jos a blocului. O valoare negativă determină, de asemenea, să apară o bară de derulare pe măsură ce elementul este împins dincolo de partea de jos a ferestrei browserului.
Sistem de coordonate în poziționare absolută
În mod implicit, toate elementele care sunt setate la poziția absolută sunt legate de același sistem de coordonate - fereastra browserului. Dar poate fi schimbat prin setarea oricărui element părinte la poziționarea relativă. Apoi blocul copil își va schimba locația în funcție de părinte. Dacă printre elementele părinte există mai multe cu poziționare relativă, atunci numărătoarea inversă este de la cea mai apropiată dintre ele. În acest caz, poziționarea implicită va fi cea setată în eticheta body.

Punct de referință pentru un element poziționat absolut
Înainte ca unui element să i se dea o poziție absolută, acesta a fost numit într-un loc origine implicită. Dacă nu setați proprietăți pentru un astfel de bloc, acesta nu se va clinti. Îl puteți muta setând proprietatea marginii. Funcționează similar cu proprietățile de poziționare. Dacă nu definiți valoarea proprietății din stânga și toate celelalte, atunci aceasta va fi egală cu auto. De asemenea, puteți utiliza automat pentru a readuce elementele în locurile lor originale.

Poziționare fixă
O altă valoare este fixă. Proprietatea poziție ancorează un element într-o locație specifică. Poziționarea fixă ​​este adesea folosită pentru a crea meniuri în CSS. Este similar cu absolut, dar blocul fix este eliminat din flux. Chiar și atunci când derulați pagina, un astfel de element va rămâne pe loc, așa că este convenabil să îl utilizați pentru a crea meniuri în CSS. Punctul de referință va fi apoi ancorat în fereastra browserului. Dacă există mai multe blocuri poziționate, proprietatea z-index este folosită pentru a le aranja. Poate fi folosit pentru a suprascrie blocurile relative cu cele absolute, oferindu-le un index adecvat exprimat ca un număr întreg. Cu cât este mai mare, cu atât blocul va fi mai mare.
18.02.15 21.4K
Dacă tăiați orice site creat pe baza html, atunci veți vedea o anumită structură stratificată. Mai mult, cu aspectul său, va fi asemănător cu un tort stratificat. Dacă așa crezi, atunci cel mai probabil nu ai mâncat de mult. Așadar, potoliți-vă mai întâi foamea, apoi vă vom arăta cum să centrați stratul div pe site-ul dvs.:
Beneficiile aspectului folosind o etichetă
Există două tipuri principale de construcție a structurii șantierului:
• tabular;
• Bloc.
Aspectul tabelar a dominat încă de la începuturile internetului. Avantajele sale includ precizia poziționării date. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt cea mai mare parte a codului și viteza scăzută de descărcare.
Când utilizați aspectul tabelar, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce atunci când utilizați blocuri div, elementele sunt redate imediat.
Pe lângă viteza mare de încărcare, blocarea site-ului vă permite să reduceți cantitatea de cod html de câteva ori. Inclusiv prin utilizarea claselor CSS.
Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.
Construire bloc pe baza etichetelor
numite și stratificate, iar blocurile în sine sunt straturi. Acest lucru se datorează faptului că atunci când utilizați anumite valori de proprietate, acestea pot fi plasate una peste alta, similar straturilor din Photoshop.
Ajutoare pentru pozitionare
În aspectul bloc, poziționarea stratului se face cel mai bine folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru poziție
, este un plutitor.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni,
Unde:
• stânga - aliniază elementul la marginea din stânga a ecranului. Restul elementelor se înfășoară spre dreapta;
• dreapta - alinierea la dreapta, înfășurarea restului elementelor - în stânga;
• nici unul - împachetarea nu este permisă;
• inherit - moștenește valoarea elementului părinte.
Luați în considerare un exemplu ușor de poziționare div-uri folosind această proprietate:
Blocul din stânga
blocul din dreapta


Acum să încercăm să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când unui bloc nou i se dă o valoare de aliniere la dreapta sau la stânga, acesta se deplasează în direcția specificată. Prin urmare, rămâne doar să setați toate cele trei blocuri să plutească: stânga:


Dar nici aceasta nu este cea mai bună opțiune. Când fereastra este redusă, toate straturile se aliniază pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-urile.
Straturi de centrare
În exemplul următor, vom folosi un strat de container pentru a plasa restul elementelor. Acest lucru rezolvă problema deplasării blocurilor unul față de celălalt atunci când fereastra este redimensionată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la valoarea zero pentru marginile de la marginea superioară și auto pe părțile laterale (marja: 0 auto):
Blocul din stânga
bloc central
blocul din dreapta


Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, atunci puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului containerului (reduceți-l). Adică, după editarea css-ului, clasa ar trebui să arate astfel:
După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba la nicio dimensiune a ferestrei browserului. Iată cum arată un div centrat vertical:


În următorul exemplu, am folosit o serie de noi proprietăți CSS pentru a centra straturile în interiorul containerului:


O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div în interiorul unui div:
• display: inline-block - aliniază un element bloc într-o linie și îl înfășoară cu un alt element;
• vertical-align: middle - aliniază elementul la mijloc în raport cu părintele;
• margin-left - setează marginea la stânga.
Cum se face o legătură dintr-un strat
Oricât de ciudat sună, este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Luați în considerare un exemplu practic de implementare a unui strat de legătură:
Link către site-ul nostru


În acest exemplu, folosind linia de afișare: block , setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a div-ului să devină o legătură, setați înălțimea: 100%.
Ascunderea și afișarea elementelor de bloc
Elementele bloc oferă mai multe opțiuni pentru extinderea funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului să fie unic și ușor de recunoscut. Dar trebuie să plătești pentru o astfel de lipsă exclusivă de spațiu liber.
Acest lucru este valabil mai ales pentru pagina principală, costul publicității pe care este cel mai mare. Prin urmare, există o problemă în care să „împinge” un alt banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!
O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:
Acesta este butonul magic. Făcând clic pe acesta, se va ascunde sau se va afișa blocul ascuns.
De la autor: Salutari. Poziționarea elementelor css este un subiect foarte important în construirea site-ului web. În acest articol, îmi propun să luăm în considerare mai detaliat toate modalitățile de a muta blocuri în jurul unei pagini web.
Care sunt tipurile
Dacă vorbim despre poziționarea elementelor bloc, atunci aceasta este setată folosind proprietatea poziției. 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ă aceea, blocul își pierde proprietățile obișnuite și cade complet din fluxul normal. Ce este acest flux? Încercați să puneți mai multe elemente la nivel de bloc într-un rând în marcaj. Cum vor deveni? Unul după altul și nimic altceva.
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 a poziționa cu precizie elemente decorative, pictograme și alte bunătăți.
Acum poate fi mutat folosind proprietățile din stânga, dreapta, sus și jos. În mod implicit, mișcarea are loc relativ la marginile ferestrei browser, dar dacă elementul părinte este setat la poziția: relativ, atunci decalajul are loc 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 așa fac butonul de sus - îl plasează doar în colț. Și iată un alt exemplu în care voi arăta mai întâi posibilul marcaj:
< 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( pozitia : relativa ; Bloc ( poziție: absolută; sus : 0 ; dreapta: 10px;
În acest exemplu, am înregistrat mai întâi poziționarea relativă a containerului părinte (relativă - mai multe despre asta mai târziu în articol), apoi am stabilit poziția absolută pentru același element .block. Ca urmare, 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
Aceasta este următoarea vedere și se scrie așa - poziție: relativă. Coordonatele sunt specificate de aceleași proprietăți ca și în poziția absolută. Singura diferență semnificativă este că elementul nu cade în mod oficial din flux - există loc pentru el.
Funcționarea acestei valori poate fi comparată cu vizibilitatea: ascuns, când elementul este ascuns de pagină, dar locul de sub acesta rămâne neatins. Același lucru se întâmplă și cu plasarea relativă - blocul poate fi mutat oriunde, dar locul de sub acesta rămâne gol și nu va fi ocupat de alte părți.
De asemenea, este important de știut că offset-ul nu provine de la marginile ferestrei browserului web, ci din locul în care a stat inițial blocul. adica:
Blocare (poziție: relativă; sus: 10px; dreapta: 50px; )
Bloc ( pozitia : relativa ; sus: 10px; dreapta: 50px
Blocul se va deplasa cu 50 de pixeli la dreapta și 10 pixeli la stânga.

Fixare
Cu siguranță pe internet ați văzut de mai multe ori pe site-uri când, la scrolling, un banner nu a dispărut, ci a continuat să fie în zona dvs. de vizibilitate, parcă s-ar lipi de 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 obișnuită
Ultima vedere este statică, care este comportamentul normal al elementelor la nivel de bloc. Nu trebuie să fie scris, deoarece este implicit, dar trebuie să știți totuși despre a patra valoare. Uneori, poziție: static este scris pentru a înlocui un alt tip de poziționare pe anumite evenimente de pe pagina web.

Cum se face corectă poziționarea blocurilor în css?
Am luat în considerare semnificațiile, 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 să aplicați. Cu fix, ți-am dat deja un exemplu - poate fi folosit pentru a crea bare laterale, anteturi sau subsoluri lipicioase.
Poziționarea relativă poate ajuta atunci când doriți să mutați un bloc ușor în raport cu poziția sa și să-l mențineți în flux. De asemenea, este setat la blocurile părinte pentru a utiliza mișcarea absolută pentru elementele copil.
Alte tehnici: centrare, blocuri plutitoare
Proprietatea poziției nu rezolvă toate problemele legate de plasarea elementelor bloc. Cum ați crea, de exemplu, o grilă de site cu el? Nu am idei bune. Aici sunt utile și alte caracteristici.
Cu ajutorul float în css, se fac adesea grile. Proprietatea vă permite să împingeți blocul la marginea stângă sau dreaptă a părintelui (float: left, float: right), permițând mai multor elemente bloc să devină într-o singură linie, ceea ce apare foarte des 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 introdusă pictograma (poziție: absolută), undeva, corectați ușor poziția blocului, lăsând un loc în urma lui (poziție: relativă) și unde ar trebui să fie fix 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, asigurați-vă că vă abonați la blogul nostru și primiți noi materiale educaționale. Și vă sfătuiesc să vă uitați și la al nostru, unde se pune și un subiect asemănător. (elemente de pozitionare)
Proprietate poziţie are următoarele semnificații
static relativ absolut fix
Proprietățile sunt aplicate numai împreună cu acesta (cu excepția poziției: static;)
top fund dreapta stânga
poate fi prezentă în același timp
marginea transforma plutitor (cu excepția poziției: absolut; și poziției: fix;)

Adăugați o etichetă goală înainte de div cu class="primer" - .
Introducere
Elementele de pe o pagină web ocupă o anumită cantitate de spațiu. Prin analogie cu bărcile din jocul „Cuirasat”. Între nave ar trebui să existe celule goale - margine.
Pentru a plasa un element peste altul, trebuie să setați o valoare negativă pentru marjă. Dar apoi conținutul etichetelor se va suprapune unul pe celălalt. Cu ajutorul poziției și proprietăților, ele se ridică la nivelul 2.
Într-o ordine firească, etichetele de jos din cod sunt afișate deasupra celor de sus. Datorită indicelui z de la nivelul 2, puteți determina singur elementul vizibil.


Poziționare statică - poziție: static;
poziție: static este implicit și înlocuiește relativ , absolute și fixed . Valorile proprietăților de sus, jos, dreapta, stânga sunt ignorate. În absența transformării, nici indicele z nu este luat în considerare.
DAR
B
ÎN
Poziționare relativă - poziție: relativă;
Blocul căruia îi atribuim poziția: relativă va avea prioritate. Conținutul elementului de jos este ascuns.
DAR
B
ÎN


Pentru a plasa blocul B deasupra lui C, dar sub A, nu este suficient să alocați poziția: relativ la acesta, deoarece în cod se află sub blocul A, ceea ce înseamnă că se va suprapune.
DAR
B
ÎN


De asemenea, trebuie să setați indicele z pentru elementul B să fie mai mic decât cel al blocului A.
DAR
B
ÎN


În loc de margine în poziționarea relativă, uneori este mai bine să folosiți proprietățile de sus, jos, dreapta, stânga. Punctul de plecare pentru ele este poziția inițială a elementului. În același timp, blocul B continuă să fie amplasat ca și cum blocul A se află în același loc - îi lasă spațiu gol. Prin urmare, nu puteți evoca cu un div gol ().

DAR
B
ÎN


Analogie deplină cu o proprietate
DAR
B
ÎN
Pentru elemente inline
Elementele de marjă încorporate nu se mișcă în sus și în jos (). Numai sus, jos

BDARB
sau

BDARB
B A B
Poziționare absolută și fixă
S-ar părea că blocul cu poziție: absolut ar trebui să fie deasupra poziției: relativ, dar nu este cazul, aici se aplică ordinea naturală. Aceasta înseamnă că z-index vă va permite să alegeți un element prioritar între ele.

DAR
B
ÎN
Blocul C ignoră poziția inițială a blocului B, deoarece cu poziție: absolută și poziție: fixă, elementul încetează să afecteze etichetele adiacente fie prin lățime/înălțime, fie prin float: stânga.

DAR
B
ÎN
Masa finală
proprietăți distinctive	poziție: static;	poziție: relativă; transforma: traduce();	poziție: absolută;	poziție: fixă;
acoperire	elementele nu trebuie așezate una peste alta	elementele au prioritate asupra vizibilității asupra statice. Alte valori sunt echivalente. Cel care se află mai jos în cod va fi vizibil sau are o valoare mare a indicelui z
punct de referință sus, dreapta, jos și stânga	ignorat	pozitia initiala a elementului	marginea elementului părinte	marginea ferestrei browserului
elemente din jur	luați în considerare poziția curentă a elementului	ia in considerare pozitia initiala a elementului	ignora poziția elementului
latime: 100% este lățimea	element (pentru inline)/element părinte (pentru bloc)		element părinte cu poziția nu setată la static	ferestrele browserului
element de defilare a paginii	mișcări			„se lipește” de locația specificată în fereastra browserului
Și acum, pentru a consolida materialul, faceți clic pe butoanele de la începutul articolului, gândiți-vă de ce au apărut astfel de modificări.
Dezvoltatorii web din zilele noastre 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 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 definește tipul de poziționare al unui element.
Opțiuni de poziționare
static este valoarea implicită a proprietății de poziționare. Raportăm 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, 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ățile care compensează elementul:
• dreapta
• fund
• Valoarea inițială a acestor proprietăți este cuvântul cheie auto.
Rețineți că, dacă un element are proprietatea de poziție setată la absolute sau fixed , atunci este un element poziționat absolut. De asemenea, pentru elementele poziționate, începe să funcționeze proprietatea z-index, care determină ordinea de stivuire.
Diferențele dintre principalele metode de poziționare
Acum să ne uităm rapid la cele trei diferențe de bază dintre tipurile de poziționare disponibile:
• elementele poziționate absolut (absolut) sunt îndepărtate complet din pârâu, locul lor este luat de cei mai apropiați vecini.
• relativ poziționate (relative) și lipicioase (lipicioase) își păstrează locul în pârâu și vecinii lor cei mai apropiați nu îl ocupă. Cu toate acestea, căptușeala acestor elemente nu ocupă spațiu, ci este complet ignorată de alte elemente, iar acest lucru poate duce la suprapunerea elementelor.
• elementele fixe (iar poziționarea fixă ​​este un fel de poziționare absolută) sunt întotdeauna poziționate în raport cu fereastra (ignorând poziționarea strămoșilor), î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 „elementelor lipicioase” este încă o tehnologie experimentală cu suport limitat pentru browser. 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 scăzută a acestei proprietăți, acest articol nu va fi discutat.
Elemente de poziționare cu tip de poziție absolută
Sunt sigur că majoritatea dintre voi știți cum funcționează poziționarea absolută. Cu toate acestea, pentru începători, multe lucruri din ea pot deruta.
Prin urmare, am decis să încep cu el când descriu trăsăturile puțin cunoscute ale poziționării.
Deci, un element poziționat absolut este decalat 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, acesta este decalat de domeniul de aplicare.
Acest lucru este demonstrat de următorul exemplu:
În această demonstrație, caseta verde este poziționată inițial absolut cu zero padding bottom:0 și left:0 , strămoșul său (caseta roșie) 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 atunci 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 plutitor, 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 aferentă:
În acest exemplu, definim două elemente diferite care plutesc spre dreapta. Rețineți că atunci când caseta roșie devine poziționată absolut, ignoră valoarea proprietății float, în timp ce caseta 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ă ​​dobândește 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 lățimii și înălțimii setate la aceasta funcționează numai cu elemente la nivel de bloc și bloc inline și, deoarece nu are conținut, nu are nicio dimensiune.
Când dați unei casete roșii o poziție absolută sau fixă, aceasta devine blocată și dimensiunile blocurilor specificate în ea intră în vigoare.
Elementele poziționate absolut nu au căptușeală
În mod implicit, când două margini verticale se ating, acestea sunt îmbinate într-una egală cu cea mai mare 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 îmbinată cu vecinii lor.
În această demonstrație, elementul are o umplutură de 20px. Căptușeala sa se prăbușește cu umplutura elementului părinte, de asemenea, 20px. După cum puteți vedea, doar poziționarea absolută nu se prăbușește.
Dar cum putem împiedica căptușeala să se prăbușească? Trebuie să punem un separator între ele.
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 elementului depinde de unitățile alese (pixeli sau procente).
E puțin jenant, nu? 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, offset-ul este calculat ca procent din lățimea (pentru stânga și dreapta) sau înălțimea (sus sau jos) a fluxului. Sunt permise valori negative.
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 se specifică un offset în pixeli, elementul este mutat acolo unde trebuie să fie.
Și dacă alegem procente 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 principalele probleme.
Top articole similare

Formatarea caracterelor și a paragrafelor în MS Word Ce este formatarea paragrafelor

Sistemul de fișiere îndeplinește o funcție

Istoricul creării monitoarelor CRT - CRT cu o mască de fante (Slot Mask)