Fixed navigation bar disappears? (CSS positioning help)


#1

I'm creating a resume site as a side project, just so I can put what I've learned about CSS to action. The latest design trends seem to favor that "wide" format like in a lot of Bootstrap templates. But since I want to code the entire site from scratch, I'm only using the templates as inspiration. And now I've hit a snag...

I want my navigation bar to be fixed. But when I set its position to fixed, it disappears behind the large image that usually sits underneath it. When its position is set to relative or not set at all, it appears fine. I'm assuming I screwed up with the inheritance somewhere, but I'm having trouble figuring it out.

The relevant code (tried to trim down the cosmetic code to shorten it):

HTML:

	<body>
		<div class="wrapper">
			<div class="navbar">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li id="rightlink"><a href="#">Link</a></li>
				</ul>
			</div>
			
			<div class="banner">
				<div id="bannerwrap">
					<h1 id="bigger">My Resume (over banner image)</h1>
					<h2>More text here (also over banner image)</h2>
				</div>
			</div>
			
			<div class="intro">
				<img src="profile.jpg" />
				<h2 id="bigger">Hello, world!</h2>
			</div>
		</div>
	</body>

CSS:

/* BODY DESIGN */

body {
margin: 0;
padding: 0;
}

.wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow: scroll;
}

/* NAVIGATION BAR DESIGN */

.navbar ul {
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
padding: 22px 16px;
}

#rightlink {
float: right;
}

/* BANNER DESIGN */

.banner {
background-image: url("carousel2.png");
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
height: 85%;
display: block;
position: relative;
}

#bannertext {
position: absolute;
top: 75%;
left: 35%;
}

/* HOME PAGE DESIGN */

.intro {
position: relative;
display: block;
overflow: hidden;
max-width: 100%;
padding: 3% 0%;
}

I tried looking at the code of the Bootstrap theme I was getting inspiration from, but it didn't help. It seems to just have the position set to fixed with no trouble at all. Can anyone advise on what I'm doing wrong? I'm only just learning how to use positioning properly.


#2

This is some CSS I used to make a pretty simple navbar that floats on the top right of a webpage.

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: black;
	position: absolute;
	top: 0px;
	right: 0px;
}

li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 5px 10px;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
}

li a:hover{
	background-color: grey;
}

If you take a look at this site you'll see that navbar I just pasted the code from in live use, and decide if that technique is what you're trying to do.