-->

position: fixed; относительно родителя

Предварительно стоит посмотреть на возможности position: sticky;. С большой долей вероятности требуется именно он.

Позиционирование элемента с position: fixed; на всю ширину родителя

<style>
.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>
.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>
в f t
наверх ↑

4 комментария:

Unknown
Спасибо, разобрался, но моего умишка не хватает усложниться до такого:
Как, например, "Фиксированный блок при прокрутке слева от родителя" заставить быть временно фиксированным. Т.е. если представить, что розовый блок это "Заголовок 1", а в родительском "Текст 1" и при полной прокрутки "Текста 1" "Заголовок 1" должен смениться на блок "Заголовок 2" с новым родителем "Текст 2" ?
Как (не реклама) здесь arzamas.academy/materials/1034
Unknown
Интересно как это реализовать на Drupal 8. Раньше был модуль Floating Block, в drupal 8 он не работает. Я понимаю что на блогере другой движок, и проще редактировать html, но в друпале столько полюшек, мама не горюй. Может подскажете что делать на drupal8 чтобы блоки со второй колонки прилипали к правой стороне?
NMitra
Временно фиксированный - это position: sticky; Тут приблизительный пример http://shpargalkablog.ru/2017/04/position-sticky.html#sticking-description-image
NMitra
Это не от движка зависит - это стили CSS. Они на всех движках работают )) Нужно смотреть ваш сайт е его верстку.

Отправить комментарий