Codul HTML pentru exemplu este prezentat mai jos.
Exemplu 1. Crearea de straturi
Stratul 1 în partea de sus
Stratul 2 din partea de sus
Pentru a crea straturi, utilizați eticheta DIV sau SPAN. Aceste etichete sunt interschimbabile și diferă numai în ceea ce privește aspectul în browser. Dacă este necesară indentarea înainte și după text, utilizați elementul DIV. Când plasați textul într-un paragraf, se aplică eticheta SPAN.
Tipul de poziționare este determinat de parametrul de poziție. poziția elementului cu cele două coordonate de sus și de stânga. iar ordinea stratului este z-index.
Pozitionarea stratului
Proprietatea poziției poate lua una din cele trei valori: statică (statică), absolută (absolută) și relativă (relativă). Parametrul static nu are niciun efect asupra aspectului straturilor în mod prestabilit.
În poziționarea absolută, stratul este poziționat în raport cu colțul din stânga sus al ferestrei de document. Dacă plasați un strat în altul, coordonatele absolute sunt considerate din colțul din stânga sus al stratului părinte.
În plus față de etichetele DIV și SPAN, poziționarea absolută este susținută de următoarele elemente:
APPLET, INPUT, BUTON, OBIECT, SELECT, FIELDSET, IFRAME, TABEL, IMG, TEXTAREA.
Poziția: parametrul relativ este utilizat pentru a deplasa stratul în raport cu elementul părinte. Setarea acestei valori nu modifică plasarea elementului, dar dacă sunt setate proprietățile de sus sau de stânga. apoi stratul este deplasat din poziția sa normală în document.
Poziția stratului
În timp ce proprietatea poziției indică tipul sistemului de coordonate, parametrii de sus și de stânga determină poziția exactă a stratului. Valorile acestor parametri pot fi determinate în procente sau în pixeli, să ia valori pozitive și negative. Acest lucru vă permite să plasați conținut mai mare sau mai mic pe pagină, indiferent de poziția fizică a codului HTML. Aceasta este, în partea de sus a paginii, puteți pune un strat, care este descris în partea de jos a documentului HTML.
Proprietatea z-index
Proprietatea indexului z determină ordinea straturilor sau suprapunerea lor în raport cu alte straturi. În mod prestabilit, toate straturile sunt poziționate cu z-index egal cu zero. Alte straturi pot fi plasate mai jos prin setarea unui index z-negativ (Figura 1). Pentru straturile în care indexul z nu este setat, această valoare este atribuită implicit în funcție de poziția în document. Prin urmare, stratul care este plasat în document mai târziu este plasat deasupra celorlalte elemente poziționate mai devreme.
Fig. 1. Layout Layers
Exemplul afișat la început indică utilizarea parametrului z-index pentru a schimba poziția straturilor unul față de celălalt.
Proprietatea de vizibilitate
Pentru a afișa sau a ascunde un strat, utilizați opțiunea de vizibilitate. Poate lua valorile vizibile. Implicit este afișarea stratului și ascunderea. care îl ascunde.
Controlul dinamic al afișării stratului vă permite să creați meniuri derulante, animații pe pagina web, ferestre de rulare și de instalare și multe altele.
Articole similare
Trimiteți-le prietenilor: