CSS提要栏重叠容器内容

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        // open or close navbar
        $('#sidebar, #content, footer').toggleClass('active');
    });
 });

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#content {
  width: calc(100% - 230px);
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}
#content .panel {
  padding: 20px 0;
  margin-top: 80px;
}
#content.active {
  width: 100%;
}

#top-bar {
  background-color: #FFF;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.075);
  z-index: 997;
  width: inherit;
  position: fixed;
}
#top-bar .navbar {
  padding: 20px;
}

#sidebar {
  min-width: 230px;
  max-width: 230px;
  background: #FCFCFC;
  transition: all 0.3s;
  height: 100vh;
  position: fixed;
  margin-left: -230px;
  top: 0;
  /* top layer */
  z-index: 999;
  padding: 20px;
  box-shadow: 0px 0px 15px #0000001f;
}
#sidebar.active {
  margin-left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="wrapper">
        <nav id="sidebar" class="active">
            <h1>Sidebar</h1>
        </nav>
        <div id="content" class="">
            <header id="top-bar" class="">
                <div class="navbar navbar-expand container-anchor">
                    <button type="button" id="sidebarCollapse" class="btn btn-outline-dark mr-3">
                        <i class="fas fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                </div>
            </header>
            <div id="panel" class="panel container-fluid">
              <section>
                <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis obcaecati voluptatum magni ducimus mollitia excepturi rem iste illum, quod dolorum doloribus, nostrum reiciendis perferendis animi porro sapiente nesciunt? Excepturi eveniet iusto rerum quis illo repudiandae tempora, harum amet nesciunt officia libero ullam magni aliquam numquam? Doloremque aliquam in atque harum aut mollitia aspernatur doloribus veritatis porro et cum, nulla quidem perspiciatis at rerum magni provident quibusdam nam id cumque reiciendis assumenda consectetur! Placeat quod alias eligendi error repudiandae, numquam repellat! Voluptatem dolore iste praesentium nulla ducimus fugit sed perspiciatis. Soluta nisi, esse porro reprehenderit illo commodi hic placeat nobis aspernatur. Necessitatibus nihil cupiditate, ut odit optio soluta? Corrupti quam omnis provident vel eos aliquam non blanditiis totam iste. Repellendus dolorem voluptatem atque, laborum, suscipit amet exercitationem eum ipsum, quaerat qui ratione aut architecto repellat sint! Quas earum exercitationem amet recusandae pariatur odit aspernatur sint perferendis non porro, harum quidem. Ea.
                    </p>
                    
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis obcaecati voluptatum magni ducimus mollitia excepturi rem iste illum, quod dolorum doloribus, nostrum reiciendis perferendis animi porro sapiente nesciunt? Excepturi eveniet iusto rerum quis illo repudiandae tempora, harum amet nesciunt officia libero ullam magni aliquam numquam? Doloremque aliquam in atque harum aut mollitia aspernatur doloribus veritatis porro et cum, nulla quidem perspiciatis at rerum magni provident quibusdam nam id cumque reiciendis assumenda consectetur! Placeat quod alias eligendi error repudiandae, numquam repellat! Voluptatem dolore iste praesentium nulla ducimus fugit sed perspiciatis. Soluta nisi, esse porro reprehenderit illo commodi hic placeat nobis aspernatur. Necessitatibus nihil cupiditate, ut odit optio soluta? Corrupti quam omnis provident vel eos aliquam non blanditiis totam iste. Repellendus dolorem voluptatem atque, laborum, suscipit amet exercitationem eum ipsum, quaerat qui ratione aut architecto repellat sint! Quas earum exercitationem amet recusandae pariatur odit aspernatur sint perferendis non porro, harum quidem. Ea.
                    </p>
                    
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis obcaecati voluptatum magni ducimus mollitia excepturi rem iste illum, quod dolorum doloribus, nostrum reiciendis perferendis animi porro sapiente nesciunt? Excepturi eveniet iusto rerum quis illo repudiandae tempora, harum amet nesciunt officia libero ullam magni aliquam numquam? Doloremque aliquam in atque harum aut mollitia aspernatur doloribus veritatis porro et cum, nulla quidem perspiciatis at rerum magni provident quibusdam nam id cumque reiciendis assumenda consectetur! Placeat quod alias eligendi error repudiandae, numquam repellat! Voluptatem dolore iste praesentium nulla ducimus fugit sed perspiciatis. Soluta nisi, esse porro reprehenderit illo commodi hic placeat nobis aspernatur. Necessitatibus nihil cupiditate, ut odit optio soluta? Corrupti quam omnis provident vel eos aliquam non blanditiis totam iste. Repellendus dolorem voluptatem atque, laborum, suscipit amet exercitationem eum ipsum, quaerat qui ratione aut architecto repellat sint! Quas earum exercitationem amet recusandae pariatur odit aspernatur sint perferendis non porro, harum quidem. Ea.
                    </p>
              </section>
            </div>
        </div>
    </div>

$(document).ready(function(){

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $('.overlay').toggleClass('active');
    });

    $('.overlay').on('click', function () {
        $('.overlay').toggleClass('active');
        $('#sidebar').toggleClass('active');
    });

    $('#dismiss').on('click', function () {
        $('.overlay').toggleClass('active');
        $('#sidebar').toggleClass('active');
    });

});

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

/* display .overlay when it has the .active class */
.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar {
  min-width: 350px;
  max-width: 350px;
  background: #000;
  color: #fff;
  transition: all 0.3s;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -350px;
  /* top layer */
  z-index: 9999;
  text-align: center;
  padding: 20px;
}

#sidebar.active {
  margin-right: 350px;
}

header {
  background-color: #eee;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="wrapper">
            <nav id="sidebar" class="">
                <button type="button" id="dismiss" class="d-block btn btn-success">
                Close Sidebar
                </button>
                
                <div>
                   Sidebar Content
                </div>
                
            </nav>
        <main id="content">
            <header class="top-menu">
                <div class="navbar navbar-expand navbar-light container">
                    <h2>Top Bar</h2>
                    <button type="button" id="sidebarCollapse" class="nav-link ml-auto btn btn-outline-dark">
                       Toggle Sidebar
                    </button>
                </div>
            </header>
            
            <section>
              Content goes here
            </section>
            
        </main>
        <div class="overlay"></div>
    </div>