Cunoaște Intuit, curs, de poziționare

Rezumat: Plasarea elementelor blocului în precizia de marcare spațiu de lucru pixeli HTML-browser: dimensiunile bloc, coordonate absolute și relative. Straturi: vizibilitatea de management.

Această secțiune este dedicată plasarea de nivel bloc HTML markup în spațiul de lucru browser-ul la cel mai apropiat pixel. Înainte de apariția specificațiilor CSS-P. care a fost inclusă în specificația CSS2. nimic ca acest lucru nu a putut fi realizat pe HTML-pagini. Unele dintre cele mai partizane cititori pot întreba: „Ce-Stratului de marcare?“. În primul rând, STRATUL Netscape a fost introdus aproape simultan cu apariția -P CSS, și în al doilea rând, este susținută doar de browserele Netscape.

Înainte de apariția CSS-P înseamnă doar poziționare relativ precisă a tabelului au fost. Acestea permit poziționarea exactă a componentelor HTML-pagini unul cu altul în avion. CSS-P vă permite să plasați cu precizie elementul de marcare nu numai în raport cu alte componente de pagină, dar, de asemenea, în raport cu marginile de pagină.

În plus, CSS-P adaugă o altă dimensiune a paginii - elemente de marcare poate „rula în jos“ pe unul pe altul.

Este posibil să se schimbe ordinea de „coliziune“ - schimbarea straturi. Pentru a vedea acest lucru, este suficient să utilizați link-ul din exemplul de mai sus.

Dar asta nu e tot.

Coordonate și dimensiuni

CSS-P definește două sisteme de coordonate. relativă și absolută. Acest lucru permite o flexibilitate a elementelor de cazare în raport cu câmpul de lucru ca o fereastră de browser frontieră și unul de altul.

Blocks - nu sunt termeni abstracte, care nu au loc pe planul paginii. Blocurile sunt dreptunghiuri care „matura“ zonă. Text și alte componente ale paginii sub unitatea sunt disponibile pentru utilizator, astfel încât dimensiunile liniare ale unității sunt de a crea HTML-pagini nu sunt de o importanță egală. decât coordonatele sale.

coordonate absolute

Când se folosește „absolut“ coordonate punct de referință este plasat la colțul din stânga sus al unității părinte (de exemplu, o fereastră de browser), iar axele X și Y sunt orientate orizontal spre dreapta și în jos pe verticală, respectiv:

Fig. 5.5. coordonate absolute

Dacă în acest sistem de coordonate, un element de bloc trebuie să fie situat la 10 de mai jos px superioară a spațiului de lucru browser cutoff și dreapta 20 px de marginea din stânga a spațiului de lucru browser, descrierea acestora va fi după cum urmează:

In acest tip de sistem de înregistrare a coordonatelor definite poziție atribut (valoare - absolută), coordonate X specificat atribut stanga (valoare - 20 px), coordonate Y - un top atribut (valoare - 10 px).

Atributele definesc partea din stânga sus și coordonatele colțul din stânga sus al blocului în sistemul de coordonate absolute. (Open)

Fig. 5.6. coordonate absolute

Valorile coordonatelor pot fi negative. Pentru a scoate unitatea din zona afișată cu dimensiuni liniare de 100 px (înălțime) de 200 px (lățime) suficientă pentru a se poziționa după cum urmează: (deschis)

Fig. 5.7. coordonate absolute

coordonatele relative

Acest sistem de coordonate vă permite să plasați unități pe pagina în coordonatele, unitatea de acoperire a acestora. Avantajele acestui sistem de coordonate sunt evidente: vă permite să mențină poziția relativă a elementelor de marcare în orice dimensiunea ferestrei browser și setările implicite.

Ca un punct de referință în acest sistem de coordonate selectat punctul de locație a unității implicite curente. Axa X, astfel orientată în direcție orizontală spre dreapta, iar axa Y - vertical în jos.

Pentru a defini coordonatele blocului, tipul de înregistrare este utilizat în acest sistem: (deschis)

Fig. 5.8. coordonatele relative

Pentru a lucra cu sistemul de coordonate relativ este mai bine să se utilizeze blocuri DIV universal. Acest lucru se datorează faptului că, în Netscape Navigator, de exemplu, un paragraf nu poate cuprinde secțiuni. Orice bloc se închide imediat paragraf, prin urmare, a pus în ea ceva este imposibil.

În sistemul de coordonate relativ, puteți utiliza prejudecată negativă: (deschis)

Fig. 5.9. coordonatele relative

Fig. 5.10. coordonatele relative

In acest exemplu, strat. mutat inițial 50 de pixeli la dreapta, după ce faceți clic pe link-ul de hipertext este deplasată de 100 de pixeli la stânga pentru a obține o valoare negativă de offset a axei X (stânga: -50 px). După apăsarea poziția link-ul a blocului este restabilită.

Dimensiuni bloc liniare

Dimensiunile liniare bloc sunt specificate de doi parametri: lățime (lățime) și înălțimea (înălțime) unitate. Lățimea și înălțimea blocului browsere este interpretat în moduri diferite.

Exemplul dat în descrierea suficientă pentru a produce un rezultat, dar în Netscape Navigator pentru acest bloc trebuie să se aplice unele atribute suplimentare: (deschise)