КодSEOБлогИное

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

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Предварительно стоит посмотреть на возможности 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>
Михаил ГоголевПомогите. Есть сайт шириной 990px. Мне надо в правом верхнем углу разместить телефон так, чтобы при прокрутке страницы вниз он оставался на месте и чтобы при масштабировании он не выходил за ширину страницы. NMitraРасполагайте в нужном месте странице по горизонтали и не прописываете свойство left. А свойством top задайте нужную высоту. Михаил ГоголевСпасибо. Мешало right)) Сменил на margin — все норм.
Все комментарии