Перейти к содержанию

Липкое позиционирование

Липкое позиционирование в таблицах

Чтоб зафиксировать первую строку в таблице table, надо фиксировать не саму строку tr, а её ячейки:

table thead th {
  position: sticky;
  top: 0;
}

Чтоб зафиксировать первый столбец, надо фиксировать каждую первую ячейку:

table td:first-child {
  position: sticky;
  left: 0;
}

Двойное липкое позиционирование

Необходимо чтоб нижний блок прилипал после первого, причём высота первого блока зависит от содержимого.

<div class="main">
  <div class="first">Первый блок</div>
  <div class="second">Второй блок</div>
</div>
.first {
  position: sticky;
  top: 0;
}
.second {
  position: sticky;
  top: 0;
}

В качестве top для второго блока взять высоту первого блока:

document.querySelector('.second').style.top = document.querySelector('.first').offsetHeight + 'px';