How to make everything under the navbar

I have a navbar fixed to the top. When scrolling, almost everything goes under the navbar, but there is this piece of text that goes above the navbar.
Can I force the navbar to be at the topmost, or force the text to be bottom-most?

Note: to observe the issue, please add arbitrary content so you will be able to scroll through the page.

Here’s the code: https://jsfiddle.net/q8prw19c/1/

  .caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}
.caption span.border {
  color: #fff;
  padding: 18px;
  font-size: 3em;
  letter-spacing: 10px;}
.parallax { 
    background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.topnav {
	position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: #333;
    overflow: hidden;
}
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    font-size: 17px;
}
<div class="topnav" id="myTopnav">
		<a target="_blank" rel="nofollow" href="#home">Home</a>
		<a target="_blank" rel="nofollow" href="#news">News</a>
		<a target="_blank" rel="nofollow" href="#contact">Contact</a>
		<a target="_blank" rel="nofollow" href="#about">About</a>
	</div>
	<div class="parallax">
		<div class="caption">
      <span class="border">test</span>
    </div>
	</div>



I gave the body a z-index of 1 and your #topnav element a z-index of 2, that way it will be on top of everything you add to your site.

html, body { 
	margin: 0;
	height: 100%;
	}

body {
  z-index: 1;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  
}

.caption span.border {
  color: #fff;
  padding: 18px;
  font-size: 3em;
  letter-spacing: 10px;
  
}

.aboutMe{
  z-index:2;
}

.parallax { 
    background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.topnav {
	position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: #333;
    overflow: hidden;

  z-index:2;

}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
<html>

</html><body>
	
	<div class="topnav" id="myTopnav">
		<a target="_blank" rel="nofollow" href="#home">Home</a>
		<a target="_blank" rel="nofollow" href="#news">News</a>
		<a target="_blank" rel="nofollow" href="#contact">Contact</a>
		<a target="_blank" rel="nofollow" href="#about">About</a>
	</div>
	
	<div class="parallax">
		<div class="caption">
    <span class="border">test</span>
  </div>

	</div>
	
	<div class="aboutMe">test</div>
	
	<pre>
	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	.
	</pre>
	</body>

</html>

Try adding a “z-index” css prop to the absolutely positioned element.

See the Update :

Give .topnav a higher z-index.