Displaying content below a fixed header

Question

My page has a fixed header, I am aware that this causes content flows to begin at the top of the page. I've been searching for a workaround for this and nothing seems to be working, for example this one

Below is the code and here is a codepen - As you can see the content in my article is being displayed at the top of the page, although it is place at the bottom of my html.

I'd appreciate an explained workaround so that I can LEARN.

UPDATE - adding padding-top:{500px} successfully fixed this issue. Is this a recommended workaround? I was made aware of this fix here.

Thanks guys!

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header {
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {
  background: url("");
  height: 100vh;
  width: 100%;
  background-size: cover;
  position: absolute;
  z-index: -1000;
}

#intro {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>

            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
              </li>
              <!--
          -->
          </ul>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>

Answer 1

You already have a 100px header and a margin-top applied to site-content for the content following it, as is usually done.

1. A position: fixed header will be taken out of the flow. So the DOM element following it will overlap.

2. A z-index higher that the surrounding content is given so that it comes on top (which you have done giving wrapper a z-index: 99)

3. The content following it is given a margin-top value. If the height of the header is fixed (as is the case here) you give it using CSS, if the height of the header is dynamic, you might have to opt for javascript to set the height dynamically.

So restrict the heights of #global-navigation and .header using height: 100% and add display: flex to the navigation ul. Also remove the absolute positioning of the banner and apply background image to site-content- see demo below:

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

#global-navigation { /* ADDED */
  height: 100%;
}

.header {
  height: 100%; /* ADDED */
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.site-content { /* ADDED */
  background: url("http://placehold.it/50x50");
  height: 100vh;
  width: 100%;
  background-size: cover;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  display: flex; /* ADDED */
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {} /* removed absolute positioning */

#intro { /* removed absolute positioning */
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>
              </div>
            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
                </div>
              </li>
              <!--
          -->
          </ul>
          </nav>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>