CSS: проблемы с position:fixed

302

19 июля 2021, 14:20

Делаю сайдбар с контентом, который можно проскроллить. При этом сам сайдбар должен оставаться в фиксированном положении.

Сайдбар и блок с основным контентом я сделал флекс элементами.

Если примененить к сайдбару positioin: fixed; то он перестает вести себя как flex элемент: залазит на блок с основным контентом и игнорирует свойство flex-basis.

Примечание: сайдбар будет сворачиваться, поэтому и сам сайдбар и основной контент сделан флекс элементами. Чтобы при сворачивании сайдбара, основной контент занимал все оставшееся место.

Что я делаю не так и как нужно сделать?

Вот код. Можно раскоментировать свойство position: fixed и посмотреть на результат.

.window { 
  margin: 150px auto; 
  display: flex; 
  width: 500px; 
  height: 500px; 
  border: 1px solid red; 
  justify-content: space-between;   
  overflow-y: auto; 
} 
 
.left {   
  /* position: fixed; */ 
  background: green; 
  flex-basis: 30%;   
  flex-grow: 1; 
  overflow-y: auto; 
} 
 
.right { 
  background: blue; 
  margin-left: 20px; 
  flex-basis: 70%; 
  height: 100vh; 
  flex-grow: 3; 
}

<div class = "window"> 
   
  <div class = "left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left </div> 
   
  <div class = "right">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right </div> 
</div>

Answer 1

Скорее всего Вас интересует вопрос про fixed.

В HTML есть понятие потока документа: http://htmlbook.ru/blog/ponyatie-potoka

Когда Вы пишете position:fixed - то элемент вырывается из потока и при этом фиксируется относительно экрана просмотра. Соответственно от родительского блока он берет значения left и top, которые формируются относительно экрана просмотра(в данном примере они соответствуют левому верхнему углу родителя). И дальше он с родительским блоком уже не взаимодействует (родительский flex на него не действует), поэтому в частности этот элемент никуда не скролится, а "прилипает" к экрану.

Из описания сложно сказать чего Вы хотите добиться. Возможно поможет эта статья: http://dbmast.ru/vydvigayushheesya-bokovoe-menyu-na-chistom-css