La începutul ideii de proiectare, marcarea documentelor HTML a fost efectuată în principal cu ajutorul tabelelor. Tabelele au fost utilizate ori de câte ori este posibil. De exemplu, pentru a face o indentare în stânga, faceți o coloană goală a tabelului. Dacă ar fi fost necesar să plasați mai multe elemente în interiorul celulei tabelului, o altă masă imbricată a fost inserată acolo.
Drept rezultat, codul final a fost un cod foarte închis, format dintr-un număr imens de mese. Îmi uneori amintește de programele de bază pe care le-am scris la școală. Nu am știut atunci că există funcții și programare procedurală, așa că programele noastre erau un "macaron" solid, cu un nivel profund de cuibărit.
Acum, din ce în ce mai multă popularitate (mai ales în stilul Web 2.0) se câștigă un mod no-tabular de a face pagini web bazate pe poziția proprietății CSS. Chiar și în unele posturi vacante am văzut cerința de bază pentru un web designer este abilitatea de a crea cod HTML fără tabele.
Cum să setați poziționarea elementelor
Pentru a seta poziționarea, există o poziție a proprietății CSS. Poate lua una din cele cinci valori:
Valoarea implicită pentru această proprietate este statică. Ie dacă valoarea proprietății poziției nu este specificată explicit, atunci elementul va fi poziționat static. Acest lucru este important. Valoarea proprietății poziției nu este moștenită în mod implicit. Pentru ca valoarea să fie moștenită de la elementul părinte, este necesar ca elementul copil să stabilească în mod explicit proprietatea de poziționare pentru a moșteni, de exemplu:
Poziție a.link: moștenire;
>
În acest caz, poziționarea link-ului va fi aceeași cu cea a elementului părinte.
Poziționarea statică
Poziționarea statică nu este, în general, poziționată deloc. Nu este necesar să fie specificat în mod explicit, deoarece aceasta este valoarea implicită. Una dintre opțiunile posibile pentru folosirea explicită a acesteia este să suprascrieți regulii globale aplicate mai devreme. Aici este cel mai simplu exemplu:
În acest caz, toate elementele div sunt atribuite poziționării absolute. Dar pentru acele elemente cu id = "new" instalat, poziționarea va fi statică. Aproximativ, a doua regulă desființează prima pentru unele elemente.
Poziționarea statică înseamnă că elementul este plasat imediat după elementul care îl precede în structura documentului HTML.
Poziționarea relativă
Poziționarea relativă este poziționată relativ. elementul însuși. Cât de ciudat sună este adevărat.
Iată cum funcționează teoretic: poziția elementului în contextul aspectului paginii rămâne aceeași ca și când poziționarea ar fi statică. Dar elementul este afișat în altă parte, ale cărui coordonate sunt stabilite în raport cu poziția sa statică.
Este posibil ca acest lucru să nu fie clar. De aceea, ia în considerare un exemplu:
În partea superioară a dreptunghiului mare, ar trebui să existe un div cu id = test1. Dar din moment ce am setat poziția relativă (valorile de sus și de stânga) pentru aceasta, este afișată cu 30 de pixeli deasupra și cu 30 de pixeli în partea dreaptă (partea superioară deplasată la -30 și marginea stângă la 30).
Mergem mai departe. Se pare că am eliminat testul elementului1. Cu toate acestea, uita-te la elementul test2. Este poziționat ca și cum elementul test1 nu ar fi fost schimbat (adică ar fi fost poziționat static).
Aceasta este principala caracteristică a poziționării dinamice. Elementul este afișat deplasat, cu toate acestea, structura documentului web nu se modifică.
Pentru a seta decalajul unui element din poziția sa inițială, există patru proprietăți: stânga, dreapta, sus, jos. Aceste proprietăți înseamnă - cât de mult ar trebui mutată marginea corespunzătoare a elementului: stânga, dreapta, sus, jos. Valorile acestor proprietăți pot fi negative, ceea ce înseamnă o schimbare în direcția opusă (pentru stânga și spre dreapta pentru stânga, pentru partea superioară și cea inferioară în sus).
În consecință, nu are niciun sens să se precizeze simultan proprietățile de sus și de jos, precum și stânga și dreapta. Unul dintre acești parametri va fi ignorat.
Rețineți că pentru celulele de table, comportamentul acestor elemente în standardul CSS 2.1 nu este definit, deci nu utilizați aceste proprietăți pentru tabele.
Se pare că utilizarea poziționării relative este destul de limitată. Dar vom vedea cum poți folosi această proprietate.
Poziționarea absolută
Dacă un element este setat la poziționare absolută, acesta este complet eliminat din structura documentului HTML. Adică documentul este generat ca și cum elementul nu ar exista. După aceea, elementele absolut poziționate sunt suprapuse în partea superioară.
Pentru a seta poziția unui element cu poziția absolută, se utilizează toate cele patru proprietăți: stânga, partea de sus, partea de jos, dreapta. Numai sensul acestor proprietăți diferă de semnificația lor cu poziționarea relativă. Cu poziționarea absolută, aceste proprietăți specifică pozițiile celor patru colțuri ale elementului.
Unghiurile pot fi specificate în unități de lungime (de exemplu, în pixeli) sau în procente. Valoarea procentuală pentru proprietățile de sus și de jos determină procentul înălțimii blocului care conține. Valoarea procentuală pentru proprietățile din stânga și din dreapta determină procentul lățimii blocului care conține.
Ce este un "bloc care conține"?
Aceasta este o întrebare foarte bună. Acum vom învăța de ce este important să cunoaștem și să înțelegem.
Iată ce spune specificația CSS 2.1 despre "blocul care conține":
Dacă elementul este poziționat în poziția absolută, blocul care conține acesta este cel mai apropiat strămoș care are poziție absolută, relativă sau fixă. Dacă un astfel de strămoș nu există, atunci blocul care conține este "blocul inițial care conține".
Să încercăm să înțelegem. Cu un strămoș, totul este clar. Cel mai apropiat predecesor cu poziționare este diferit de static și conține un element.
Dar dacă nu există strămoși care ar fi fost bine poziționați? Și ce înseamnă conceptul de "bloc de bază care conține"?
Să ne întoarcem din nou la specificația CSS:
Cu alte cuvinte, putem presupune că elementul care conține elementul de bază este documentul html în sine. Adică primul element care are poziția absolută va fi poziționat în raport cu întregul document. Putem presupune, dar nu aș recomanda să mă bazez. Pentru ca specificația să o dea browserului (agent utilizator).
Acest lucru nu este întotdeauna convenabil. Este mult mai convenabil să poziționați elementul dintr-un anumit punct al documentului. Acest lucru se poate realiza cu ajutorul poziționării relative.
Amintiți-vă că am menționat că voi vorbi despre modul în care puteți utiliza elemente cu poziționare relativă? Deci, acum vom ști răspunsul la această întrebare.
Pentru a poziționa un element este absolut, dar luând în considerare din alt element, trebuie să faceți acest alt element (care ar trebui să fie un strămoș în ierarhia documentului HTML) să devină un bloc care conține. Acest lucru se poate face prin atribuirea relativă la proprietatea poziției și fără schimbarea proprietăților pentru schimbarea elementului (stânga, partea de sus, partea de jos, dreapta).
Pentru un element absolut poziționat, proprietățile stânga, de sus, de jos, din dreapta specifică decalajul colțurilor elementului din colțurile corespunzătoare ale blocului care le conține. Astfel, drept: 30px înseamnă că colțul din dreapta al elementului ar trebui să fie deplasat cu 30 de pixeli de la marginea din dreapta a blocului care conține.
Iată cum ar trebui să funcționeze teoretic:
Dar nu toate browserele respectă standardele HTML și CSS. Unul dintre cei mai importanți "băieți răi" este Internet Explorer de la Microsoft.
În acest caz, IE, vine în felul următor. Dacă sunt specificate ambele proprietăți, de exemplu, partea de sus și de jos, sau stânga și dreapta, IE ignoră a doua valoare. Ie dacă atât partea superioară cât și cea inferioară sunt specificate în același timp, IE va aplica numai partea de sus și partea de jos va fi ignorată.
"Înfrângerea" unui astfel de comportament al IE poate fi setat numai la proprietățile de sus și la stânga și indicând în mod explicit lățimea și înălțimea elementului. Iată un exemplu:
Acest cod va fi afișat în mod egal în toate browserele, deși nu arată la fel de elegant ca setarea tuturor celor patru proprietăți. Și toate pentru că IE este cel mai popular browser din lume. Vrei să mergi la FireFox sau la Opera. )
Pentru oricare dintre cele patru proprietăți, se poate specifica automat. Aceasta înseamnă că se ia valoarea acestei proprietăți, ca și cum elementul ar fi poziționat în poziție statică. Acest lucru este convenabil dacă doriți să mutați elementul în orice direcție. De exemplu, pentru a muta un element cu 8 pixeli spre dreapta, puteți scrie:
Poziționarea fixă
Poziționarea fixă este foarte similară cu cea absolută. Singura diferență este că blocul care conține este întotdeauna o fereastră de browser.
Chiar și atunci când defilați fereastra, un astfel de element va rămâne în același loc pe pagină.
Dar trebuie să plătim un omagiu Microsoft. Ei, deși lent, dar aduc browser-ul lor la standarde. În special, în poziția IE7: există o soluție fixă și chiar funcționează așa cum ar trebui. Poate într-o zi, vom trăi la IE, care suportă complet toate standardele :).
Proprietatea indexului Z
Elementele poziționate relativ sunt amplasate într-un singur loc, dar sunt afișate în celălalt. Elementele poziționate în mod absolut și permanent sunt eliminate din structura documentului. În toate cele trei cazuri, este posibil ca unele elemente să se suprapună între ele.
Pentru a indica în mod explicit în ce ordine elementele vor fi afișate și a fost introdusă proprietatea z-index. Valorile valide pentru această proprietate sunt numere întregi (inclusiv numere negative).
Z-index este ca a treia dimensiune a unei pagini web. Cu cât valoarea proprietății indexului z este mai mare, cu atât este mai aproape de utilizator (adică de tine) elementul de pagină.
concluzie
Trimiteți-le prietenilor: