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

Posted 2023-03-06

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

【英文标题】：fixed header breaking out parent wrapper and behind content [duplicate]

【发布时间】：2014-07-14 01:39:48

【问题描述】：

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

【问题讨论】：

我确实尝试了该链接中的一些内容，但它们对解决问题没有帮助。我想在没有 javascript 的情况下实现这一点，它需要在响应时表现得很好。

【参考方案1】：

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

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

编辑：

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

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

【讨论】：

对不起，我忘了更新我的小提琴。这是更新版本jsfiddle.net/claireC/7hnbc/1

@user2856111 查看已编辑的答案，这对您有用吗？

带有position: fixed 的元素被从流中取出，并且总是相对于视口而不是它们的父元素进行计算。

是的，但是如果它们的 z-index 低于其他元素的 z-index，它们仍然会隐藏在它们下面。

z-index 将它带到前面，但它仍然不包含在它的父级中，宽度为：100%