I have successfully created a fixed header with a higher z-index than the body content, allowing the content to slide underneath it. To position the content div directly below the fixed header, I applied a position:relative and specified a top value.
Initially, everything seemed to be working fine until I added elements to the content div. When I added an h1 and attempted to give it some margin-top, the entire page (including the header) shifted downward by the margin-top value.
I've encountered similar issues in the past (collapsing divs, right?) and usually resolved them with a set width, float, or display block. However, none of these solutions are fixing the problem this time around.
Can someone please point out what I might be overlooking?
*
{
padding: 0;
margin: 0;
}
/* CSS code for various elements */
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="logo.png" alt="logo" id="logo" />
<nav>
<ul>
<li>
<img src="iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="signIn.png" alt="sign-in" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>