Elemente de poziționare pe o pagină web cu proprietatea Poziție CSS

Aprilie 26, 2024

Înainte de Cascading Style Sheets, erai limitat în controlul pe care îl aveai asupra poziției obiectelor de pe pagina ta web. Puteți utiliza tabelul HTML pentru a controla poziția ușor, dar acest lucru nu a fost foarte precis. Acum, cu CSS, puteți avea un control precis asupra modului în care fiecare element este plasat pe pagina dvs. web.

Înainte de a putea utiliza proprietatea poziției CSS pentru a poziționa elemente pe pagina dvs. web, trebuie să discutăm terminologia utilizată pentru a comunica cu browserul web. CSS nu numai că ia în considerare lățimea și înălțimea paginii dvs. web, dar și dimensiunile browserului web.

Lățimea și înălțimea browserului
La început, s-ar putea să credeți că aceasta se referă la fereastra browserului deschis. Dar se referă cu adevărat la întregul browser, inclusiv la comenzi și butoane.
Lățimea și înălțimea vie
Acesta este termenul pentru zona de afișare a browserului. Nu include controalele.
Lățimea și înălțimea documentului
Aceasta este întreaga lățime și înălțime a paginii tale web. Dacă aceste dimensiuni sunt mai mari decât lățimea și înălțimea Live, atunci browserul va afișa bare de defilare, după cum este necesar.

Acum că cunoașteți termenii pentru limitele în care puteți poziționa părțile din pagina dvs. web folosind CSS, să aruncăm o privire la cele patru valori de poziție.

Static
Aceasta este implicită. Dacă nu specificați altfel pentru un element, browserul va utiliza poziționarea statică. La fel cum sună, cu poziționarea statică nu poți repoziționa elemente pe pagina web. Deci, cum determină browserul unde să plasezi fiecare obiect pe pagina ta web? Poziționează fiecare element în ordinea în care apar în codul HTML. Dacă aveți o imagine cu logo-ul, apoi un salut și apoi o notificare privind drepturile de autor în HTML-ul dvs., browserul va plasa acestea pe pagina web în acea ordine. Nu puteți muta salutul deasupra imaginii logo-ului.
rudă
Poziționarea relativă funcționează la fel ca statica prin faptul că ordinea elementelor din codul HTML controlează fluxul elementelor din pagină. Cu toate acestea, puteți utiliza poziționarea relativă pentru a controla poziția unui element în raport cu celelalte elemente de pe pagina web.
Absolut
Când utilizați poziționarea absolută cu un element, acest lucru va face ca elementul să fie independent de restul paginii web. Deoarece plasarea sa nu mai este determinată de ordinea HTMLului, va trebui să utilizați coordonatele X și Y pentru poziționarea elementului.
Fix
Aceasta funcționează la fel ca poziționarea absolută. Cu toate acestea, elementul care are poziționare fixă nu va defila cu pagina web. Aceasta este o caracteristică plăcută de utilizat pentru un logo sau un meniu pe care doriți să rămâneți vizibile, pe măsură ce pagina defilează în sus.

Instrucțiuni Video,: Week 9 (Aprilie 2024).

Elemente de poziționare pe o pagină web cu proprietatea Poziție CSS, proprietatea poziției HTML, CSS, CSS, poziționare statică, poziționare relativă, poziționare absolută, poziționare fixă, cum să poziționezi elemente pe o pagină web, folosește CSS pentru poziționarea elementelor pe o pagină web

Articolul Precedent

Articolul Următor

Articole Similare

calculatoare

Photoshop pentru artiști de Sylvie Covey

Aprilie 2024

În Photoshop pentru artiști: un ghid complet pentru artiști frumoși, fotografi și imprimatori, autorul Sylvie Covey abordează artistic utilizarea Photoshop pentru a crea artă digitală. Abordarea ei...

calculatoare

Îmbunătățiți clipa folosind Photoshop

Aprilie 2024

Photoshop vă poate ajuta să îmbunătățiți clip art-ul dintr-o imagine plană într-una cu profunzime și textură. Pentru a demonstra unele dintre tehnicile de a face acest lucru, voi folosi o imagine de...