Jak - Przyklejony obraz
Dowiedz się, jak utworzyć przyklejony obraz za pomocą CSS.
Przyklejony obraz
Uwaga: ten przykład nie działa w przeglądarce Internet Explorer, Edge 15 i wcześniejszych wersjach.
Przyklejony obraz
Przykład
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Element z position: sticky;
jest pozycjonowany na podstawie pozycji przewijania użytkownika.
Przyklejony element przełącza się między relative
i 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, Edge 15 i wcześniejsze wersje nie obsługują 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.bottom
left
Aby dowiedzieć się więcej o pozycjonowaniu CSS, przeczytaj nasz samouczek CSS Position .
Aby dowiedzieć się więcej o stylizacji obrazów, przeczytaj nasz samouczek CSS Images .