Предварительно стоит посмотреть на возможности 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>