Исправлена ​​проблема с позиционированным элементом

Question

<nav>
</nav>

<div class="container">
      <div class="wrapper row">
        <div class="col-md-3 col-lg-3 left-side">
        </div>
        <div class="col-md-6 col-lg-6 middle-side">
        </div> 
        <div class="col-md-3 col-lg-3 right-side">
        </div>
      </div>
    </div>
</div>

<footer>
</footer>

CSS code

.wrapper {
  width: 100%;
  height: auto;
  background-color: var(--main-bg2-color);
  margin-top: 55.6px !important;
}

.wrapper.row {
  margin: 0;
}

.left-side {
  width: 10%;
  background-color: var(--main-bg2-color);
  color: var(--main-text-color);
  height: auto;
  padding-top: 41px;
  padding-left: 0;
  position: fixed;
  overflow: hidden;
}

.middle-side {
  padding-top: 40px;
  width: 100%;
  background-color: var(--main-bg2-color);
  color: white;
  height: auto;
  overflow: hidden;
  margin-left: 14%;
}

.right-side {
  padding-top: 40px;
  padding-left: 20px;
  width: 100%;
  background-color: var(--main-bg2-color);
  height: auto;
  position: fixed;
  right: 0;
}

Здесь у меня есть контейнер внутри, класс левой стороны и класс правой стороны должны оставаться фиксированными, в то время как класс средней стороны должен прокручиваться. Моя проблема в том, что класс правой стороны всегда справа от окна, когда я даю право: 0. Я хочу, чтобы правый класс был прав: 0 по отношению к классу-обертке. Есть ли способ исправить это?

Answer 1

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

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