position proprietate specifică tipul metodei de poziționare utilizate pentru un element (static, relative, fixed or absolute) .
Poziția de proprietate
position proprietate specifică tipul metodei de poziționare utilizate pentru un element.
Există patru valori de poziție diferite:
-
static -
relative -
fixed -
absolute
Elementele sunt apoi poziționate folosind partea de sus, de jos, stânga și proprietățile potrivite. Cu toate acestea, aceste proprietăți nu vor funcționa decât dacă position proprietate este setată mai întâi. De asemenea, ele funcționează în mod diferit în funcție de valoarea poziției.
position: static;
Elementele HTML sunt poziționate static în mod implicit.
Elementele poziționate statice nu sunt afectate de partea de sus, de jos, stânga și dreapta proprietăți.
Un element cu position: static; nu este poziționată în nici un mod special; este întotdeauna poziționat în funcție de fluxul normal al paginii
Aici este CSS care este utilizat:
position: relative;
Un element cu position: relative; este poziționată în raport cu poziția sa normală.
Setarea de sus, dreapta, jos, și proprietățile din partea stângă a unui element relativ pozitionat va face ca acesta să fie ajustat departe de poziția sa normală. Alte conținut nu vor fi ajustate pentru a se potrivi în orice lacună lăsată de elementul.
Aici este CSS care este utilizat:
Exemplu
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
} Încearcă - l singur » position: fixed;
Un element cu position: fixed; este poziționat în raport cu portul de vizualizare, ceea ce înseamnă că rămâne în același loc, chiar dacă pagina este defilat întotdeauna. În partea de sus, dreapta, jos, și proprietățile rămase sunt utilizate pentru a poziționa elementul.
Un element fix nu lasă un gol în pagina în care ar fi fost localizat în mod normal.
Observați elementul fix în colțul din dreapta-jos al paginii. Aici este CSS care este utilizat:
Exemplu
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Încearcă - l singur » position: absolute;
Un element cu position: absolute; este poziționat în raport cu cel mai apropiat strămoș clasată (instead of positioned relative to the viewport, like fixed) în (instead of positioned relative to the viewport, like fixed) mai (instead of positioned relative to the viewport, like fixed) de (instead of positioned relative to the viewport, like fixed) .
In orice caz; în cazul în care un element absolut Poziționat nu are strămoși poziționate, folosește corpul documentului, și se deplasează împreună cu pagina de defilare.
Notă: Un "positioned" element este unul a cărui poziție este nimic altceva decât static .
Aici este un exemplu simplu:
Aici este CSS care este utilizat:
Exemplu
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Încearcă - l singur » Suprapunerea Elemente
Atunci când elementele sunt poziționate, ele se pot suprapune alte elemente.
z-index proprietate specifică ordinea stivă a unui element (which element should be placed in front of, or behind, the others) în (which element should be placed in front of, or behind, the others) .
Un element poate avea un ordin pozitiv sau negativ stiva:
Aceasta este o poziție
Deoarece imaginea are un indice de z -1, acesta va fi plasat în spatele textului.
Un element cu comanda stack mai mare este întotdeauna în fața unui element cu un ordin inferior stack.
Notă: În cazul în care cele două elemente poziționate se suprapun , fără a z-index specificat, elementul poziționat ultimul în codul HTML va fi afișat în partea de sus.
Pozitionarea textului într-o imagine
Cum de a poziționa text peste o imagine:
Exemplu
Încearcă-l singur:
Stânga sus » Dreapta sus» Stânga jos » dreapta jos» Centrat »
Mai multe exemple
Setați forma unui element
Acest exemplu demonstrează modul de a seta forma unui element. Elementul se tunde în această formă, și afișate.
Cum de a afișa preaplin într - un element folosind parcurgere
Acest exemplu demonstrează modul în care să setați proprietatea de preaplin pentru a crea o bară de defilare atunci când conținutul unui element este prea mare pentru a se potrivi într-o anumită zonă.
Cum de a seta browser - ul să se ocupe în mod automat preaplin
Acest exemplu demonstrează modul de a seta browser-ul să se ocupe în mod automat preaplin.
Schimbarea cursorului
Acest exemplu demonstrează modul de a schimba cursorul.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Toate proprietățile CSS poziționare
| Proprietate | Descriere |
|---|---|
| bottom | Setează marginea margine inferioară pentru o casetă poziționată |
| clip | Clips un element de pozitionat absolut |
| cursor | Specifică tipul de cursor care urmează să fie afișat |
| left | Setează marginea din stânga margine pentru o casetă poziționată |
| overflow | Specifică ce se întâmplă în cazul în care conținutul debordează caseta unui element |
| overflow-x | Specifică ce să facă cu stânga marginile / dreapta ale conținutului în cazul în care deversează zona conținutului elementului |
| overflow-y | Specifică ce să facă cu marginile de sus / jos ale conținutului în cazul în care deversează zona conținutului elementului |
| position | Specifică tipul de poziționare pentru un element |
| right | Setează marginea marginea din dreapta pentru o casetă poziționată |
| top | Setează marginea margine superioară pentru o casetă poziționată |
| z-index | Setează ordinea stiva unui element |