Układ CSS - Właściwość pozycji
Właściwość positionokreśla typ metody pozycjonowania używanej dla elementu (statyczna, względna, stała, bezwzględna lub przyklejona).
Stanowisko Nieruchomość
Właściwość positionokreśla typ metody pozycjonowania używanej dla elementu.
Istnieje pięć różnych wartości pozycji:
staticrelativefixedabsolutesticky
Elementy są następnie pozycjonowane przy użyciu właściwości górnej, dolnej, lewej i prawej. Jednak te właściwości nie będą działać, dopóki position
właściwość nie zostanie ustawiona jako pierwsza. Działają również różnie w zależności od wartości pozycji.
pozycja: statyczna;
Elementy HTML są domyślnie pozycjonowane statycznie.
Na elementy pozycjonowane statycznie nie mają wpływu właściwości górna, dolna, lewa i prawa.
Element z position: static;nie jest pozycjonowany w żaden specjalny sposób; jest zawsze pozycjonowany zgodnie z normalnym przepływem strony:
Oto używany CSS:
Przykład
div.static {
position: static;
border: 3px solid #73AD21;
}
pozycja: względna;
Element z position: relative;jest pozycjonowany względem swojej normalnej pozycji.
Ustawienie górnych, prawych, dolnych i lewych właściwości elementu pozycjonowanego względnie spowoduje, że zostanie on odsunięty od jego normalnego położenia. Inna zawartość nie zostanie dopasowana do luki pozostawionej przez element.
Oto używany CSS:
Przykład
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
pozycja: ustalona;
Element z position: fixed;jest pozycjonowany względem widocznego obszaru, co oznacza, że zawsze pozostaje w tym samym miejscu, nawet jeśli strona jest przewijana. Właściwości top, right, bottom i left służą do pozycjonowania elementu.
Stały element nie pozostawia luki na stronie, w której normalnie by się znajdował.
Zwróć uwagę na stały element w prawym dolnym rogu strony. Oto używany CSS:
Przykład
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;pozycja: bezwzględna;
Element z position: absolute;jest pozycjonowany względem najbliższego pozycjonowanego przodka (zamiast pozycjonowany względem rzutni, jak na stałe).
Jednakże; jeśli element pozycjonowany bezwzględnie nie ma pozycjonowanych przodków, używa treści dokumentu i porusza się wraz z przewijaniem strony.
Uwaga: Elementy pozycjonowane bezwzględnie są usuwane z normalnego przepływu i mogą nakładać się na elementy.
Oto prosty przykład:
Oto używany CSS:
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;
}
pozycja: lepka;
Element z position: sticky;jest pozycjonowany na podstawie pozycji przewijania użytkownika.
Przyklejony element przełącza się między relativei fixed, w zależności od pozycji przewijania. Jest pozycjonowany względem czasu, aż dana pozycja przesunięcia zostanie osiągnięta w rzutni - wtedy "przykleja się" w miejscu (jak position:fixed).
Uwaga: Internet Explorer nie obsługuje pozycjonowania przyklejonego. Safari wymaga prefiksu -webkit- (patrz przykład poniżej). Musisz również określić co najmniej jeden z top, lub right, aby pozycjonowanie przyklejone działało.bottomleft
W tym przykładzie przyklejony element przykleja się do góry strony ( top: 0), gdy osiągniesz pozycję przewijania.
Przykład
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Pozycjonowanie tekstu na obrazie
Jak umieścić tekst na obrazie:
Przykład
Spróbuj sam:
Więcej przykładów
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |