CSS Pozycjonowanie (Positioning)
Pozycjonowanie czasami bardzo trudne!
Zdecyduj, aby pokazać się przed elementami!
Elementy mogą zachodzić na siebie!
Pozycjonowanie (Positioning)
Właściwości pozycjonowania CSS pozwalają zlokalizować element. Może to być także element w innym elemencie tyłu, i określić zawartość elementu jest zbyt duża, co powinno się zdarzyć.
Elementy mogą być używane w górnej, dolnej, lewej i prawej atrybuty pozycjonowanie. Jednak te właściwości nie będzie działać, chyba że właściwość position jest ustawiony jako pierwszy. Mają też różne sposoby pracy, w zależności od metody pozycjonowania.
Istnieją cztery różne metody pozycjonowania.
pozycjonowanie statyczne
Domyślne elementy HTML, które nie są zlokalizowane elementy pojawiają się w normalnym strumieniu.
Statyczne elementy pozycjonujące nie będzie góra, dół, lewo, prawo wpływu.
Poprawiono pozycjonowanie
Pozycja elementu względem okna przeglądarki jest stałym punktem.
Nawet wtedy, gdy okno jest przesuwanie go nie rusza:
Uwaga: Poprawiono pozycjonowanie w IE7 i IE8 Opis DOCTYPE trzeba wspierać!
Ustalone pozycjonowanie położenia elementów dokumencie niezależnie od przepływu, a więc nie zajmują miejsca.
Stałe elementy pozycjonowane i inne elementy nakładają się na siebie.
pozycjonowanie względne
Względna element pozycjonujący jest umieszczony w stosunku do normalnej pozycji.
Przykłady
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Spróbuj »
Mogą być przemieszczane względem usytuowania elementów treści i elementów zachodzących na siebie, to nie ma zmiany oryginalnego miejsca zajmowanego.
Względna element pozycjonujący jest często używany jako blok pojemnika całkowicie umieszczone elementy.
pozycjonowanie bezwzględne
Pozycja bezwzględna ustawienie elementów względem najbliższego umieszczonymi elementu nadrzędnego, gdy element ten nie jest już umieszczony elementu nadrzędnego, jego położenie w stosunku do <html>:
Całkowicie umieszczony tak, że położenie elementów dokumencie niezależnie od przepływu, a więc nie zajmują miejsca.
Absolutnie elementów pozycjonowanych i inne elementy nakładają się na siebie.
Elementy, które pokrywają się
Orientacja i przepływu niezależnie od elementów dokumentu, dzięki czemu mogą one obejmować inne elementy na stronie
atrybutu z-index określa kolejność układania elementu (który element powinien być umieszczony z przodu lub z tyłu)
Element może mieć pozytywny lub negatywny kolejność stosu:
Element ten ma wyższą Układanie kolejność jest zawsze w przedniej części dolnej kolejność układania elementów.
Uwaga: Jeśli dwa elementy pozycjonowane pokrywają się, nie określają Z - indeks, końcowe pozycjonowanie elementów kodu HTML będzie wyświetlany na górze.
Więcej przykładów
Ten przykład pokazuje, jak ustawianie kształtu elementu. Element jest przymocowane do tego kształtu, i wyświetlane.
Jak użyć paska przewijania, aby wyświetlić zawartość elementu wewnętrznego przepełnienia
Ten przykład demonstruje właściwość przepełnienia, aby utworzyć pasek przewijania, gdy zawartość elementu w wyznaczonym obszarze jest zbyt duża, jak skonfigurować, aby pomieścić.
Jak ustawić przeglądarkę tak, aby automatycznie obsługiwać przepełnienie
Ten przykład pokazuje jak ustawić przeglądarkę tak, aby automatycznie obsługiwać przepełnienie.
Ten przykład pokazuje, jak zmienić kursor.
Wszystkie właściwości pozycjonowania CSS
"CSS" kolumna wskazuje numer, który CSS (CSS1 i CSS2) wersję definicji nieruchomości.
| nieruchomość | wyjaśnienie | wartość | CSS |
|---|---|---|---|
| dolny | Przesunięcie wyznacza granicę pomiędzy dolnym elementem pozycjonującym zewnętrznego pojemnika lub od granicy na podstawie. | automatyczny długość % dziedziczyć | 2 |
| klips | Klipy Absolutnie elementów pozycjonowanych | kształt automatyczny dziedziczyć | 2 |
| kursor | Przesuń kursor, aby wyświetlić określony typ | url automatyczny celownik domyślnym wskaźnik ruch e-resize ne-resize NW-resize n-resize se-resize sw-resize s-resize w-resize tekst czekać pomoc | 2 |
| lewo | Definiuje elementy kierowania lewego marginesu przesunięcia bloku granicę pomiędzy lewym brzegu pojemnika. | automatyczny długość % dziedziczyć | 2 |
| przelewowy | Gdy zawartość elementu ustawiona, co dzieje się, gdy przepełnienie region. | automatyczny ukryty zwój widoczny dziedziczyć | 2 |
| overflow-y | Określa, jak obsługiwać zawartość górnej / dolnej krawędzi obszaru zawartości elementu przelewowym | automatyczny ukryty zwój widoczny bez wyświetlacza bez zawartości | 2 |
| overflow-x | Określa, jak radzić sobie z prawej / lewej krawędzi obszaru zawartości przelania zawartości pierwiastków | automatyczny ukryty zwój widoczny bez wyświetlacza bez zawartości | 2 |
| pozycja | Należy określić rodzaj elementów pozycjonujących | bezwzględny stały krewny statyczny dziedziczyć | 2 |
| prawo | To definiuje elementy kierowania obejmujących swoją granicę i prawy margines przesunięcia pomiędzy prawym granicy bloku. | automatyczny długość % dziedziczyć | 2 |
| top | Definiuje element pozycjonujący na granicy oraz jego margines na blok zawiera przesunięcie pomiędzy granicami. | automatyczny długość % dziedziczyć | 2 |
| z-index | Ustawianie kolejności układania elementów | liczba automatyczny dziedziczyć | 2 |