Elemente de poziționare pe o pagină web cu proprietatea Poziție CSS
Î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 (Septembrie 2022).