Шапка таблицы не прилипает при прокрутке
Таблица свёрстана блочными элементами; её заголовок должен оставаться на месте при прокрутке списка:
.table-wrapper {
height: 500px;
overflow: hidden;
}
.table__head {
position: sticky;
top: 0;
}
Стили применяются, ошибок в консоли нет, но заголовок не прилипает. Что происходит?
- Обёртка обрезает содержимое вместо прокрутки, поэтому прилипать не к чему — нужно разрешить прокрутку по вертикали.
- Липкому элементу обязательно нужен z-index: без него шапка прилипает, но остаётся под строками таблицы и кажется исчезнувшей.
- Родителю нужно задать позиционирование relative, иначе режим sticky не активируется.
- У липкого элемента должно быть задано смещение снизу, а не сверху.