Question

我正在构建一个具有固定标头的网页。目前，固定标题不是以宽度：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;
}

固定标题突破父包装和后面的内容

1 个答案: