Poziționarea absolută și relativă a elementelor pe pagină
Este foarte important pentru un maestru web început să nu învețe doar limba HTML. aflați cum să aplicați corect etichetele pentru aspectul unei pagini web. ci și să înțeleagă ideologia. conform cărora se creează această pagină web.
Conținutul de pe o pagină Web apare de obicei în ordinea în care este codificată în HTML. În plus, elementele pot fi mutate la stânga sau la dreapta pe o pagină cu text care curge în jurul lor, puteți de asemenea să controlați poziționarea unui element cu precizie de pixeli utilizând proprietățile stilului.
Pentru poziționarea exactă pe pagină, elementului trebuie să i se atribuie o proprietate de poziție cu valoarea absolută sau relativă. După aceasta, elementul poate fi plasat oriunde cu precizie de pixeli utilizând proprietățile corespunzătoare stângii. top. și z-index.
Poziționarea relativă a obiectelor
Pentru a schimba poziția etichetei, îi puteți atribui o poziție: stil relativ. Cu poziția: relativă, poziția etichetei poate fi schimbată din poziția inițială. Proprietatea stânga specifică distanța în pixeli la care elementul se deplasează din poziția orizontală normală; proprietatea de sus specifică distanța în pixeli la care elementul se mișcă din poziția sa verticală normală.
Valoarea specificată în pixeli poate fi pozitivă sau negativă. O valoare pozitivă pentru proprietatea stângă deplasează elementul spre dreapta și valoarea negativă spre stânga. O valoare pozitivă pentru proprietatea de sus deplasează elementul de pe pagină în jos și valoarea negativă în sus.
În exemplul de mai jos, fiecare cuvânt al frazei este închis într-un container separat
Vreau
web
-
website
Ca urmare, cuvintele se schimba în raport cu poziția lor verticală normală. Nu am stabilit poziția cuvintelor pe orizontală, deoarece implicit etichetele sunt plasate într-un rând unul lângă celălalt. Poziția cuvântului se modifică numai vertical în raport cu alinierea verticală normală.
Este foarte important să înțelegeți că atunci când se utilizează poziționarea relativă (relativă), spațiul din pagina web este încă rezervat elementului în poziția inițială. indiferent de faptul că a fost mutat din acest loc. Dimensiunea și poziția originală a etichetei sunt stocate în fluxul elementelor de pagină, ocupate acum de spațiu liber, unde eticheta ar apărea în mod normal. Dar nu numai acest lucru, orice următoarea etichetă își păstrează poziția față de poziția inițială a etichetei mutate.
În timp ce elementele de pagină se deplasează vertical de la poziția lor inițială la un număr mic de pixeli, problemele de spațiu liber nu reprezintă, de obicei, o problemă. Cu toate acestea, pe măsură ce crește distanța verticală în fluxul de elemente de pagină, apare un spațiu liber, reprezentând spațiul stâng al elementului deplasat anterior. Ar trebui să vă amintiți mereu acest lucru și să verificați poziționarea obiectelor astfel încât acestea să fie plasate exact acolo unde planificatorul web a planificat.
Poziționarea absolută
În timp ce poziția: relaționează elementul față de elementele înconjurătoare, poziția: poziția absolută a elementului față de elementul său container. În mod prestabilit, elementul container este pagina web în sine, eticheta
. Prin urmare, elementele sunt poziționate absolut relativ la colțul din stânga sus al paginii web și sunt excluse din fluxul obișnuit de elemente.Expresia "Vreau un site web", plasată în acest paragraf,
definită de eticheta div. Această etichetă apare în codul HTML chiar înainte de acest paragraf.
Este absolut pozitionat; astfel încât acesta este exclus din fluxul normal al elementelor de pagină.
În legătură cu această excepție a etichetei din fluxul de elemente de pagină, paragraful este mutat în sus,
pentru a ocupa spațiul paginii care este eliberată, deci este suprapusă pe frază.
Astfel, expresia "Vreau un site web" ocupă o poziție absolută pe pagină,
indiferent ce altceva îl înconjoară. Pentru el, valoarea indexului z este de asemenea stabilită. egală cu -1,
plasându-l pe pagină sub un strat de text, astfel încât cuvântul să nu se suprapună peste text.
Stratul de pagină al paginii are întotdeauna valoarea z-index. egal cu 0 (zero). Prin urmare, eticheta
În exemplul de mai sus, eticheta
Paragraful se deplasează apoi pentru a ocupa poziția eliberată a etichetei
Singurul caz în care poziția de codare contează este atunci când elementul este poziționat numai de proprietatea stângă. Dacă nu se mișcă vertical, rămâne în poziția codată.
Foarte des, webmasterii aplică o metodă atunci când elementele care sunt poziționate unul față de celălalt sunt plasate în interiorul altui element de container.
Acest element de rezervor este poziționat în conformitate cu principiul conservării poziției acestuia în fluxul elementelor de pagină, iar elementele conținute în acesta sunt poziționate în interiorul containerului.
În acest caz, valorile de poziție absolute sunt specificate față de container, nu de pagină. Prin urmare, containerul devine un sistem de coordonate ușor de control în care elementele imbricate sunt poziționate corect.
Pentru a afla mai multe despre modificarea ordinii straturilor cu z-index și poziționarea relativă a obiectelor, puteți vedea postul: "Gestionați poziția stratului cu z-index". bine, întrebările de poziționare absolută sunt luate în considerare în lecția: "Poziționarea absolută a stratului pe o pagină web"
Trimiteți-le prietenilor: