Предварительно стоит посмотреть на возможности position: sticky;
. С большой долей вероятности требуется именно он.
Позиционирование элемента с position: fixed;
на всю ширину родителя
<style> body { margin: 0; padding: 0; } .raz { max-width: 30em; } .raz div { position: fixed; /* при отсутствии свойств top, right, bottom, left элемент фиксируется на том месте окна браузера, на котором находился до прокрутки */ width: 100%; max-width: inherit; /* наследуется значение родителя, а именно 30em */ } </style> <div class="raz"> <div></div> </div>
Установить всегда в верху сайта
<style> body { margin: 0; padding: 0; } .raz { max-width: 30em; } .raz div { position: fixed; top: 0; /* положение от верхнего края области просмотра окна браузера */ width: 100%; max-width: inherit; } </style> <div class="raz"> <div></div> </div>
Фиксированный блок при прокрутке слева от родителя
<style> .raz div { position: fixed; bottom: 0; width: 4em; margin-left: -4em; } </style> <div class="raz"> <div></div> </div> <!-- или --> <style> .raz div { position: fixed; bottom: 0; transform: translateX(-100%); } </style> <div class="raz"> <div></div> </div> <!-- или --> <style> .raz > div { position: fixed; bottom: 0; visibility: hidden; } .raz > div > div { margin-left: -100%; visibility: visible; } </style> <div class="raz"> <div> <div></div> </div> </div>
Прикрепить блок при скроллинге справа от предка
<style> .raz { position: relative; } .raz > div { position: absolute; top: 0; right: 0; } .raz > div > div { position: fixed; } </style> <div class="raz"> <div> <div></div> </div> </div>
Зафиксировать div в другом div справа
<style> .raz { position: relative; } .raz > div { position: absolute; top: 0; right: 0; } .raz > div > div { position: fixed; transform: translateX(-100%); } </style> <div class="raz"> <div> <div></div> </div> </div> <!-- или --> <style> .raz { position: relative; } .raz > div { position: absolute; top: 0; right: 0; } .raz > div > div { position: fixed; visibility: hidden; } .raz > div > div > div { margin: 0 100% 0 -100%; visibility: visible; } </style> <div class="raz"> <div> <div> <div></div> </div> </div> </div>
Закрепить блок с position: fixed;
в центре родителя
<style> .raz { position: relative; } .raz > div { position: absolute; top: 0; left: 50%; } .raz > div > div { position: fixed; transform: translateX(-50%); } </style> <div class="raz"> <div> <div></div> </div> </div> <!-- или --> <style> .raz { position: relative; } .raz > div { position: absolute; top: 0; left: 50%; } .raz > div > div { position: fixed; visibility: hidden; } .raz > div > div > div { margin: 0 50% 0 -50%; visibility: visible; } </style> <div class="raz"> <div> <div> <div></div> </div> </div> </div>