Два блока рядом (одно фиксированное положение)

Question

Я пытаюсь добавить фиксированное разделение слева от веб-страницы, в котором будет храниться информация о навигационной панели, а справа я пытаюсь добавить еще один раздел. В настоящее время он не позволяет мне размещать их рядом (тот, который я хотел добавить справа, перекрывается с фиксированным). Как выровнять их рядом?

Вот мой CSS:

.left_fixed {
  position: fixed;
  width: 16%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #041230;
  z-index: 100;
  min-width: 170px;
}

.right_side {
  position: relative;
  width: 100%;
  height: 100vh;
}

Answer 1

Причина того, что ваш стиль не работает, заключается в том, что «Position: Relative» не будет относиться к «Position: fixed».

Для достижения sh эффекта, который вы ищете I ' d предлагает вам вместо этого использовать float: left для обоих элементов.

Answer 2

1. так как вы устанавливаете width:16% для фиксированного элемента, вы должны установить остальные 84% width:84% на правый элемент.

2. Затем установите max-width к правому элементу, так как левый элемент имеет min-width. Я установил это значение max-width: calc(100% - 170px)

3. Выровняйте правый элемент по правому краю, добавив float: right.

Я сделал левый элемент полупрозрачным, чтобы вы могли видеть, что перекрытия нет.

Прочтите и запустите приведенный ниже фрагмент, чтобы понять его подробно.

PS: Я сделал левый элемент полупрозрачным, чтобы вы могли видеть, что перекрытия нет.

Надеюсь, это поможет

.left_fixed {
  position: fixed;
  width: 16%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0412303f;
  z-index: 100;
  min-width: 170px;
}

.right_side {
  width: 84%;
  background-color: green;
  height: 100vh;
  float: right;
  max-width: calc(100% - 170px);
}

body {
  margin: 0px;
}

<div class="left_fixed">
  <h1>LEFT SIDE</h1>
</div>

<div class="right_side">
  <h1>RIGHT SIDE</h1>
</div>

Answer 3

Вы можете обернуть два div внутри родительского div, а затем добавить гибкость отображения к родительскому div. Это сделает два div рядом друг с другом, а затем вы можете добавить настраиваемую ширину в .left_fixed.