固定标题打破父包装和内容[重复]

Question

我正在构建一个具有固定标题的网页。目前，固定标题不会以 width: 100% 停留在其父级中，并且它隐藏在页面内容的后面。我理解 position:fixed 将元素从正常的事物流中取出，但我不确定如何解决这个问题。我正在寻找一个可以很好地调整到不同屏幕尺寸的修复程序。这是我的 jsfiddle http://jsfiddle.net/claireC/7hnbc/1/ 和下面的代码

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

Answer 1

您能否更好地描述这个问题？对我来说效果很好，您是否在多个浏览器中尝试过？

可能是因为你没有设置z-index？

编辑：

向标题添加 z-index 对我有用：

header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
z-index: 999;
}