position właściwość określa typ metody pozycjonowania używany dla elementu (statyczny, relative, fixed lub absolutnej).
Właściwość position
position właściwość określa typ metody pozycjonowania używany dla elementu.
Istnieją cztery różne wartości pozycji:
-
static -
relative -
fixed -
absolute
Elementy umieszczone są następnie używając góra, dół, lewo i prawo własności. Jednak te właściwości nie będzie działać, chyba że position nieruchomości jest ustawiony jako pierwszy. również działa w odmienny sposób w zależności od wartości położenia.
position: static;
elementy HTML są ustawione statyczne domyślnie.
Statyczne rozmieszczone elementy nie mają wpływu na górze, na dole, z lewej iz prawej właściwości.
Element o position: static; nie znajduje się w żadnym szczególny sposób; zawsze jest umieszczony zgodnie z normalnym przepływu strony:
Oto CSS ma zastosowanie:
position: relative;
Element z position: relative; jest umieszczony w stosunku do normalnej pozycji.
Ustawianie top, right, bottom i lewej właściwości stosunkowo umiejscowionym elementu spowoduje, że należy dostosować daleko od swojej normalnej pozycji. Inne treści nie zostaną skorygowane, aby pasowały do żadnej luki pozostawione przez ten element.
Oto CSS ma zastosowanie:
position: fixed;
Element z position: fixed; jest umieszczony w stosunku do rzutni, co oznacza, że zawsze w tym samym miejscu, nawet jeśli strona jest przewijane. W górnej, prawej i lewej na dole, właściwości są używane do pozycjonowania elementu.
Stałym elementem nie pozostawia lukę na stronie, gdzie normalnie zostały zlokalizowane.
Zwróć uwagę na stały element w prawym dolnym rogu strony. Oto CSS ma zastosowanie:
Przykład
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Spróbuj sam " position: absolute;
Element z position: absolute; jest umieszczony w stosunku do najbliższego umieszczonej przodka (zamiast ustawione względem rzutni, tak jak stała).
Jednak; jeżeli bezwzględna elementu pozycjonowanego ma umieszczone przodków, wykorzystuje ciało dokumentu, a porusza się wraz z przewijaniem strony.
Uwaga: "positioned" elementem jest ten, którego pozycja jest coś oprócz static .
Oto prosty przykład:
Oto CSS ma zastosowanie:
Przykład
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;
}
Spróbuj sam " Nakładające się na siebie elementów
Gdy elementy są umieszczone, mogą nakładać się na inne elementy.
z-index właściwość określa porządek stosu element (który element powinien być umieszczony z przodu lub z tyłu, inni).
Element może mieć pozytywny lub negatywny kolejność stosu:
Jest to pozycja
Ponieważ obraz ma z-index -1, zostanie ona umieszczona za tekstem.
Element o większej kolejności stosu jest zawsze z przodu elementu z niższego rzędu stosu.
 | Uwaga: Jeśli dwa elementy pozycjonowane zachodzić bez z-index określonego elementu, usytuowanego na ostatnim miejscu w kodzie HTML pojawi się na górze. |
|---|
Pozycjonowanie tekstu w obrazie
Jak umieścić tekst na obrazku:
Przykład
Spróbuj sam:
Top Left » Top Right» Lewy dolny » Dolny Prawy» Centered »
Więcej przykładów
Ustawianie kształtu elementu
Przykład ten ilustruje sposób ustalenia kształtu elementu. Element jest przymocowane do tego kształtu, i wyświetlane.
Jak pokazują przepełnienie w elemencie za pomocą zwoju
Ten przykład pokazuje, jak ustawić właściwość przepełnienia, aby utworzyć pasek przewijania, gdy zawartość elementu jest zbyt duża, aby zmieścić się w określonym obszarze.
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.
Zmień kursor
Ten przykład pokazuje, jak zmienić kursor.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Wszystkie właściwości CSS pozycjonowania
| Nieruchomość | Opis |
|---|---|
| bottom | Ustawia dolną krawędź marginesu na umieszczonym oknie |
| clip | Klipy absolutnie elementu pozycjonowanego |
| cursor | Określa typ kursor wyświetlony |
| left | Ustawia lewą krawędź marginesu na umieszczonym oknie |
| overflow | Określa, co się dzieje, jeśli treść przelewa pole danego elementu |
| overflow-x | Określa, co należy zrobić z lewej / prawej krawędzi zawartości jeśli przelewa obszar zawartości tego elementu |
| overflow-y | Określa, co należy zrobić z górnej / dolnej krawędzi zawartości jeśli przelewa obszar zawartości tego elementu |
| position | Określa typ pozycjonowania dla elementu |
| right | Ustawia prawy brzeg marginesu na umieszczonym oknie |
| top | Ustawia górną krawędź marginesu na umieszczonym oknie |
| z-index | Ustawia kolejność stosu elementu |