How to adjust sections in html? - html

Question

I am designing a simple website using html/css/javascript/bootstrap.
But i am having weird kind of problem.
I want my menu and showcase first and after that i have another section called 'about' but about section is coming at first and menu is going down as show in pic
Here is my code
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>
Intro
</li>
<li>
About
</li>
<li>
Projects
</li>
<li>
Contact
</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

Your problem is you are using absolute positioning for everything which removes the element from the normal page flow. Learn to use relative positioning and then elements will generally fall in the order they appear in the code.