Как сделать элемент sticky если у его родителя absolute?

Question

У родителя position: absolute, можно ли у дочернего элемента сделать position: sticky?

У меня не получается, как можно найти выход?

Answer 1

Это достаточно просто сделать, никаких особых техник тут не требуется:

body {
  position: relative;
  height: 800px;
}

.wrapper {
  position: absolute;
  top: 0; 
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 60px;
  width: 100%;
  background-color: red;
}

<div class="wrapper">
  <div class="sticky"></div>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>

БЛОГ НА HUSL

Как сделать элемент sticky если у его родителя absolute?

Ответы (1 шт):