Aranjarea elementelor în interiorul div. Elemente de poziționare

), liste (

) și alte elemente.

Și acum despre

Oh.

După cum am menționat mai sus, puteți seta locația oricărui element HTML. Nu este nevoie să folosiți întotdeauna eticheta pentru aceasta

. De asemenea, utilizarea acestei etichete nu vă obligă să îi acordați vreo poziție pe pagina web.
Semnificația utilizării unui bloc specificat de o etichetă
se reduce la consolidare. La urma urmei, puteți plasa și alte elemente în interiorul acestuia (paragrafe, imagini etc.). Acest lucru creează un bloc mare cu conținut variat, care este mult mai ușor de poziționat pe o pagină web decât fiecare element separat.
Poziţionarea elementelor.
Există patru tipuri principale de poziționare:
1. Static
2. Absolut
3. Fix
4. Relativ)
Static
Folosit ca locație implicită. În acest caz, browserul se uită la codul HTML, îl împarte în elemente și compune o pagină din acestea. Rezultatul este o succesiune de un număr de elemente. Sunt afișate în ordinea în care sunt indicate în codul html.
Aplicarea parametrilor stânga, sus, dreapta și jos nu duce la niciun rezultat.
Poziționarea statică trebuie avută în vedere atunci când este utilizată poziționarea relativă.
Absolut
Folosind poziționarea absolută, sunt specificate coordonatele colțului din stânga sus al blocului. În acest caz, coordonatele sunt numărate relativ la locația elementului părinte. Dacă elementul părinte este o fereastră de browser, atunci blocul este aliniat în raport cu acesta. Dacă există un alt element în care se află blocul, atunci alinierea are loc în raport cu acest element.
Fix
Deja din nume devine clar că în acest caz elementul este fix. Se află într-un anumit loc de pe pagina web și nu se mișcă nicăieri. Această aliniere este adesea folosită pentru ferestre pop-up, unde sunt centrate și nu se mișcă în timp ce derulați pagina.
Relativ
Acest tip de poziționare poate fi dificil. Numele său nu este pe deplin potrivit. Mulți oameni confundă poziționarea relativă și absolută a elementelor. Poate părea că alinierea este relativă la elementul părinte. Și în cazul poziționării absolute - în raport cu fereastra browserului. Dar asta nu este adevărat.
Este necesar să înțelegem că locația elementului în acest caz are loc relativ la locul său într-o poziție statică. Acesta este ceea ce s-a menționat mai sus.
Mai simplu spus, îi spui browserului să mute un element atât de mulți pixeli față de locul în care se află în mod implicit.
Mai este un punct dificil. Ce se întâmplă dacă elementul părinte are o poziție relativă, dar elementul imbricat are o poziție absolută? În acest caz, coordonatele elementului copil vor fi calculate în raport cu elementul părinte, ținând cont de decalajul acestuia, dacă există.
Rezuma.
Deci, există o proprietate poziţie. Această proprietate poate lua 4 valori Static, absolut, fix și relativ. Valoarea implicită este Static.
Când specificați coordonatele pentru un element, trebuie să spuneți și browserului cum ar trebui să calculeze acele coordonate. Trebuie să-i dăm un punct de plecare.
Nu uitați că dacă nu există proprietate poziţie coordonatele nu vor fi luate in calcul, blocul va ramane in acelasi loc, in pozitia sa statica.


Acum să vedem cum sunt setate coordonatele.
În aceste scopuri, sunt utilizate patru tipuri de proprietăți:
1. Sus
2.Stânga
3. Corect
4. De jos
Top- o valoare pozitivă (de exemplu, 20px) mută blocul cu 20 pixeli în jos. O valoare negativă (-20px) mută elementul cu 20 de pixeli în sus. Toate acestea se întâmplă relativ la colțul din stânga sus.
Stânga- deplasare la stânga sau la dreapta, în funcție de semn. Relativ la colțul din stânga sus.
Dreapta- deplasare la dreapta si la stanga, in functie de semn. Relativ la colțul din dreapta sus.
Fund- schimbați în sus sau în jos, depinde de semn. Apare relativ la colțul din stânga jos.
Iată codul HTML:







Și acesta este CSS-ul:
#1 {
poziție:relativă;
sus:100px;
stânga: 100px;
lățime: 500px;
înălțime: 500px;
culoare de fundal:#CCCCCC;
}
#11 {
culoare de fundal:#003399;
poziție: absolut;
jos: -30px;
dreapta: -50px;
lățime: 100px;
înălțime: 100px;
}
#2 {
culoare de fundal:#990066;
lățime: 200px;
înălțime: 300px
}
Practică.
În timp ce scriam, mi-am dat seama.
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
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
Î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 îndepărtate complet din pârâu, locul lor este luat de cei mai apropiați vecini.
• 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 acesta î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, 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 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ționarea 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).
E 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.
Unul dintre cele mai bune lucruri despre CSS este că stilurile ne oferă capacitatea de a poziționa conținutul și elementele pe o pagină în aproape orice mod imaginabil. Acest lucru adaugă structură designului nostru și ajută la creșterea vizuală a conținutului.
Există mai multe tipuri diferite de poziționare în CSS, fiecare dintre aceste tipuri având propriul său domeniu de aplicare. În acest capitol, vom analiza câteva cazuri de utilizare diferite — crearea de aspecte reutilizabile și poziționarea unică a elementelor de unică folosință — și vom descrie câteva metode pentru a face acest lucru.
Poziționare prin plutitor
O modalitate de a poziționa elementele pe o pagină este prin proprietatea float. Această proprietate este destul de versatilă și poate fi utilizată în multe moduri diferite.
În esență, proprietatea float preia un element, îl elimină din fluxul normal al paginii și îl poziționează la stânga sau la dreapta elementului său părinte. Toate celelalte elemente de pe pagină se vor înfăşura în jurul unui astfel de element. De exemplu, paragrafele se vor înfăşura în jurul unei imagini dacă elementul proprietatea float este setată.
Când proprietatea float este aplicată la mai multe elemente simultan, face posibilă crearea unui aspect cu elemente flotante lângă sau vizavi unul de celălalt, așa cum se arată într-un aspect cu mai multe coloane.
Proprietatea float ia mai multe valori, cele două cele mai populare fiind stânga și dreapta, care permit elementului să plutească la stânga sau la dreapta părintelui său.
Imag (float: stânga; )
plutește în practică
Să creăm un aspect general al paginii cu un antet în partea de sus, două coloane în centru și un subsol în partea de jos. În mod ideal, această pagină ar trebui să fie marcată cu elemente
,
,
© 2024 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.