фиксированный div, но внутри определенного контейнера - PullRequest
Новая
       15

фиксированный div, но внутри определенного контейнера

4 голосов
/ 29 июня 2019

Я хочу, чтобы боковая панель исключалась из любого режима прокрутки на странице - так что это position:fixed.

Но я хочу, чтобы он был внутри wrap как родительский контейнер и right:0 из wrap, а не из окна.

Как это сделать? 

.wrap{width:250px; margin:0 auto; height:100vh;background:silver;}
.sidebar{position:fixed;top:0;right:0;height:100vh;background:gold;}
<div class='wrap'>
<div class='sidebar'>sidebar</div>
</div>

1 Ответ

4 голосов
/ 29 июня 2019

Одна из идей - не определять right и не указывать браузеру использовать статическую позицию.Для этого вам нужно убедиться, что статическая позиция находится справа.

Вот пример, где вы должны отрегулировать направление (и сбросить его для содержимого) 

.wrap {
  width: 250px;
  margin: 0 auto;
  height: 150vh;
  background: silver;
  direction:rtl;
}

.sidebar {
  position: fixed;
  top: 0;
  height: 100vh;
  background: gold;
}

.wrap > div:last-child {
  direction:ltr;
}

body {
 margin:0;
}
<div class='wrap'>
  <div class='sidebar'>sidebar</div>
  <div> some content</div>
</div>

Начиная с спецификации :

Для целей настоящего раздела и следующего, термин "статическая позиция "(элемента) относится примерно к позиции, которую элемент имел бы в нормальном потоке.

Тогда

Если все три из 'осталось',' width 'и' right '- это' auto ': сначала установите любые значения' auto 'для' margin-left 'и' margin-right 'на 0. Затем, если свойство' direction 'элемента, устанавливающегоблок, содержащий статическую позицию, 'ltr' устанавливает 'left' в статическую позицию и применяет правило номер три ниже;в противном случае установите «вправо» в статическую позицию и примените правило номер один ниже.

Вот еще одна идея с position:sticky

.wrap {
  width: 250px;
  margin: 0 auto;
  height: 150vh;
  background: silver;
}

.sidebar {
  position: sticky;
  float:right; /* Yes float!*/
  top: 0;
  height: 100vh;
  background: gold;
}


body {
 margin:0;
}
<div class='wrap'>
  <div class='sidebar'>sidebar</div>
  <div> some content</div>
</div>
...