Как настроить разделы в HTML?

Question

Я проектирую простой сайт, используя html / css / javascript / bootstrap.Но у меня странные проблемы.Сначала я хочу свое меню и витрину, а после этого у меня есть еще один раздел, который называется 'about', но сначала идет раздел about, а меню закрывается, как показано на рис.

Здесьмой код

home.html

<section id="home">
  <div id="menu">
    <a id="toggle" (click)="openMenu()">
      <i *ngIf="showMenu" class="fa fa-bars menu-bar" aria-hidden="true"></i>
    </a>
    <a id="close-btn" (click)="closeMenu()">
      <i *ngIf="!showMenu" class="fa fa-times close-btn" aria-hidden="true"></i>
    </a>
    <ul class="menu-items bg-white rounded" #menuItems>
      <li>
        <a href="#introduction">Intro</a>
      </li>
      <li>
        <a href="#application">About</a>
      </li>
      <li>
        <a href="#context">Projects</a>
      </li>
      <li>
        <a href="#request">Contact</a>
      </li>
    </ul>
  </div>
  <div id="heading">
    <div id="logo-tagline" class="container">

      <p id="logo">A Webdeveloper</p>
      <p id="tagline">
        Hey! I`m Narayan &
        <br> this is my website,
        <br> feel free to have a
        <br> look around.
      </p>
    </div>
  </div>
</section>
<section id="about">
  <div class="about container">
    <h1 id="about-me">About</h1>
    <p>
      Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust
      foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and greatly
      increase error- handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods
      that make writing servers fast and enjoyable.
    </p>
  </div>
</section>

style.scss

/* You can add global styles to this file, and also import other style files */

@import "~bootswatch/dist/lux/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/lux/_bootswatch.scss";
$primary-color: #F4F4F4;
$secondary-color: #FFFFFF;

body {
    background-color: $primary-color;
}

//navbar
#menu {
    position: fixed;
    top: 35px;
    right: 42px;
    z-index: 50;
}

#menu a#toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    z-index: 5;
    font-size: 1.3rem;
    color: black;
    cursor: pointer;
}
#menu a#close-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    z-index: 5;
    font-size: 1.3rem;
    color: black;
    cursor: pointer;
}

#menu ul {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    margin: 0;
    border: 1px solid #efefef;
    border-bottom: 1px solid #ddd;
    border-radius: 2px;
    padding: 35px;
    box-shadow: 0 1px 3px 0 #eee;
}
#menu ul li {
    list-style-type: none;
}
#menu ul li a {
    display: block;
    text-decoration: none;
    padding: 3px 0;
    color: inherit;
}
#menu ul li a:hover {
    text-decoration: underline;
    color: black;
}

/*sidenav 
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: $secondary-color;
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: left;
    margin-top: 30px;
}

.overlay a {
    padding-left: 10px;
    text-decoration: none;
    font-size: 26px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 35px;
    right: 40px;
    font-size: 1.3rem;
    color: black !important;
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px
    }
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
*/

//heading or showcase
#heading {
    position: absolute;
    top: 70%;
    margin-top: -150px;
    text-align: left;
    width: 100%;
}

#logo {
    font: 27px 'Italiana', sans-serif;
    text-transform: uppercase;
    letter-spacing: 14px;
    color: white;
    background-color: black;
    width: 60%;
    padding: 14px 10px 10px 10px;
}
#tagline {
    font-size: 22px;
}

//about section
#about {
    background-color: $secondary-color;
}

Answer 1

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