Question

这不会在任何浏览器中工作。我在跟随教程时甚至无法获得固定位置属性。

这是我在其他人中尝试过的一个教程。 https://youtu.be/3I2Uh-D-lzI 一切顺利，直到我进入这个位置：固定;线。

我真的想要一个固定的导航，当用户滚动时跟在页面下面......

CSS：

header {
    height: 100px;
    width: 100%;
    position: fixed;
    -webkit-transform: translateZ(0);
    top: 0px;
    left: 0px;
    right: 0px;
}

.container{
    margin: 0 auto;
}

HTML：

<header>
    <div class="container">
        <div class="logo">
            <h1>Company Name</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">services</a></li>
                <li><a href="#">resources</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </div>
</header>

Answer 1

以下是nav顶部修复所需的CSS：

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100px;
  -webkit-transform: translateZ(0);
  background-color: #00a087;
}

删除不需要的样式。例如，背景。

这是非常好的阅读来源，使nav栏位于顶部：http://sixrevisions.com/css/fixed-navigation-bar/

我创造了一个小提琴：https://jsfiddle.net/tn0hm9y7/

Answer 2

给定的答案应该有效，但这就是原因：您需要删除该变换。

transform属性启动一个新的堆叠上下文并包含框。翻译：既有变换又有位置固定的元素现在基本上坚持自己，而不是像你想要的那样。

https://stackoverflow.com/a/15256339/4504641

Answer 3

我不确定您对所提供的代码的期望如何，但是，我使用您的设置进行了一些小的更改。

<style>
header {
    height: 100px;
    width: 100vw;
    position: fixed;
    -webkit-transform: translateZ(0);
    top:0px;
    left:0px;
}
.container{
    margin: 0 auto;
}
</style>

如果你想验证只是在体内抛出一个高大的div。

<div style="height:1200px;">&nbsp;</div>

我喜欢使用宽度：100vw; （视口宽度），因为无论元素的div是什么，它都会占据屏幕的整个宽度。如果指定'left'，则不必指定'right'。

无论我做什么，固定位置都不起作用

3 个答案: