как зафиксировать блок в блоке со скролом при прокрутке?

177

17 мая 2019, 01:50

имеется блок div со скроллом. внутри него много текста и блок, который должен быть зафиксирован при скролле. как это сделать?

<div class="scroll">
  <div>text</div>
   ...
  <div class="fixed-block"></div>
  <div>text</div>
</div>

Были попытки дать fixed-block position: fixed, но он становится фиксированным относительно окна браузера. Были попытки дать fixed-block position: absolute, блок становиться поверх всего текста (как мне и надо), но но при скролле он тоже улетает. как быть?

Answer 1

Вы можете создать контейнер для скролла, и уже в нем располагать элементы абсолютно. Например, так:

div.container { 
  width: 100%; 
  height: 100px; 
  position: relative; 
} 
div.scroll { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  overflow-y: scroll; 
} 
div.fixed-block { 
  width: 30px; 
  height: 30px; 
  position: absolute; 
  z-index: 2; 
  top: 20px; 
  right: 20px; 
  background-color: green; 
}

<div class="container"> 
  <div class="fixed-block"></div> 
  <div class="scroll"> 
    <p>Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы. Волшебники и волшебницы, нам нужна ваша помощь!</p> 
    <p> Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!</p> 
  </div> 
</div>