Bootsrap 4 накладная липкая боковая панель на мобильном телефоне

Question

Я работаю над дизайном сайта, который использует Bootstrap 4. Я хотел добавить к этой липкой боковой панели справа. Мое общее видение состояло в том, чтобы иметь два поля - 1 (содержание) и 2 (боковая панель).

Мне удалось правильно разместить ящики для устройств, кроме мобильных. Тогда для мобильного я хотел иметь боковую панель поверх контента, так что 2 поверх 1.

Эта часть немного борьбы. Нет проблем в их правильном расположении. Проблема в том, что блок 2 перекрывает 1. И я не уверен, как это исправить.

У меня есть следующий код

<style>
    .content-section {
    min-height: 2000px;
  }

  .sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="content-section card card-body">
                <div>1</div>
            </div>
        </div>
        <div class="col-md-4 order-first order-md-last">
            <div class="sidebar-item">
                <div class="make-me-sticky">
                    <div class="card card-body">2</div>
                </div>
            </div>
        </div>
    </div>
</div>

Вы можете увидеть демо здесь: https://www.codeply.com/go/IiDkjH70EY

Answer 1

   <style>
    .content-section {
    min-height: 2000px;
  }

  .sidebar-item {
    position: relative; /* Change From absolute TO relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="content-section card card-body">
                <div>1</div>
            </div>
        </div>
        <div class="col-md-4 order-first order-md-last">
            <div class="sidebar-item">
                <div class="make-me-sticky">
                    <div class="card card-body">2</div>
                </div>
            </div>
        </div>
    </div>
</div>