Jakie cechy właściwości position: sticky znasz?

position: sticky – to hybryda position: relative i position: fixed.

• Domyślne zachowanie: Element zachowuje się jak z position: relative, pozostając w normalnym przepływie dokumentu.
• Podczas przewijania: Gdy element osiąga określone przesunięcie (np. top: 0) względem swojego kontenera przewijania lub obszaru widoku (viewport), "przykleja się" i zachowuje się jak z position: fixed, pozostając widocznym na tej pozycji podczas dalszego przewijania.
• Przesunięcie: Ustawiane jest przez właściwości top, right, bottom, left. Należy użyć co najmniej jednej z tych właściwości, aby sticky działało poprawnie.
• Kontener przewijania (scroll container/containing block): Element "przykleja się" w granicach swojego nadrzędnego bloku formatowania (containing block), który zazwyczaj odpowiada najbliższemu przodkowi z możliwością przewijania lub określonym kontekstem formatowania. Jeśli tylko body/html jest przewijany, przyklejenie będzie względem obszaru widoku.
• Nakładanie: Przyklejony element może nakładać się na zawartość pod nim, podobnie jak element z position: fixed.
• Z-indeks: Zachowanie nakładania jest wpływane przez właściwość z-index.
• Ograniczenia:
  • Nie działa, jeśli element nadrzędny ma overflow: hidden, overflow: auto lub overflow: scroll, które obcinają zawartość.
  • Element może "odklejać się", jeśli osiągnie krawędź swojego kontenera przewijania.
• Zastosowanie: Często używany do tworzenia "przyklejonych" nagłówków tabel, paneli nawigacyjnych lub elementów bocznych, które pozostają widoczne podczas przewijania głównej zawartości.

/* Przykład użycia */
.sticky-header {
  position: sticky;
  top: 0; /* Przykleja się do górnej krawędzi viewportu lub kontenera */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Zapewnia, że nagłówek będzie nad inną zawartością */
}