fixed header breaking out parent wrapper and behind content

Question

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"><a href="#">link</a></p>
            <a class="navLinks" href="#">link</a>
            <p class="navLinks"><a href="#">link</a></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;
}

I did try some of the stuff in that link and they did not help with the problem. I would like to achieve this w/o Javascript and it needs to act nicely when responsive. — user2856111, May 25 '14 at 19:03

Celestial Dragon of Osiris · Answer 1 · 2014-05-25T00:01:26.550

0

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;
}

edited May 25 '14 at 00:01

answered May 24 '14 at 23:49

Celestial Dragon of Osiris

386
3
6
16

Sorry, I forgot to update my fiddle. Here's the updated version http://jsfiddle.net/claireC/7hnbc/1/ – user2856111 May 24 '14 at 23:56
@user2856111 View Edited answer, does this work for you? – Celestial Dragon of Osiris May 25 '14 at 00:02
Elements with `position: fixed` are taken out of the flow and are always calculated relative to the viewport, not their parent element. – steveax May 25 '14 at 00:49
Yes, but if their z-index is lower than the other element's z-index they will still be hidden underneath them. – Celestial Dragon of Osiris May 25 '14 at 03:05
z-index brings it to the front, but it's still not contained in it's parent with width: 100% – user2856111 May 25 '14 at 18:47
You want it to have the same width as the parent without it getting higher, is that correct? – Celestial Dragon of Osiris May 26 '14 at 08:09

fixed header breaking out parent wrapper and behind content

1 Answers1