fixed header breaking out parent wrapper and behind content [duplicate] - html

Question

This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 8 years ago.
I'm building a web page that will have a fixed header. Currently the fixed header is not staying in it's parent at width: 100% and it its hiding behind the content on the page. I understand position:fixed takes the element out the normal flow of things, but I'm not sure how to fix this. I'm looking for a fix that will be have well resizing to different screen sizes. Here's my jsfiddle http://jsfiddle.net/claireC/7hnbc/1/ and codes below
html:
<header>
<nav>
<p class="navLinks navFloat">link</p>
<a class="navLinks" href="#">link</a>
<p class="navLinks">link</p>
</nav>
</header>
<div class="content">
<p class="aboutMe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget eros ut quam mollis dignissim. Nullam ultrices nisl vitae urna adipiscing vulputate. Sed ut ligula quam. Aenean lorem nunc, vulputate eget nisi ut, blandit feugiat dui. Aliquam tempor ornare felis at venenatis. Vivamus vel pulvinar turpis, vitae imperdiet nunc. Nulla purus leo, euismod eget velit eu, rutrum commodo sem. Ut eleifend sem sed purus pharetra lacinia. Donec id lacus sodales erat interdum pharetra non at purus. Proin dignissim est at leo volutpat venenatis. Phasellus pellentesque turpis vel velit blandit, non egestas purus hendrerit. Pellentesque eget massa at nisl lobortis tempor. Cras orci tellus, egestas a mauris sit amet, consectetur euismod lorem. Suspendisse faucibus odio quis leo fringilla, hendrerit hendrerit tortor luctus. Integer quis pulvinar lacus.
</p>
</div>
</div>
css:
html, body{
height: 100%;
}
body{
position: relative;
font-family: Helvetica;
}
.wrapper{
margin: 0 auto;
min-height: 100%;
width: 1280px;
background-color: red;
}
header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
}
nav{
width: 376px;
margin: 0 auto;
background-color: #000;
overflow: auto;
}
.navLinks{
display: inline-block;
}
.content{
position: relative;
background-color: blue;
padding-bottom: 226px;
text-align: center;
}
.aboutMe{
font-size: 50px;
margin: 0 auto;
width: 676px;
}
a{
text-decoration: underline;
}

Answer 1

Could you maybe discribe the problem a bit better? Works fine for me, did you try it in multiple browsers?
May it be because you haven't set a z-index?
EDIT:
Adding a z-index to the Header worked for me:
header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
z-index: 999;
}