Question

我所拥有的是位置相当基本的问题：固定。

以下是一个示例：

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
    position: fixed;
}

.content {
    background: #ccc;
    width: 100%;
    height: 5000px;
}

<div class="nav"></div>
<div class="content">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div>

我想要的是滚动开始下方黑条（具有固定位置）。

Answer 1

将填充添加到第二个div，等于第二个div的高度。

.content {
    padding-top: 50px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

当您说在后栏下方滚动时，听起来您希望内容从后栏下方开始。因此，为第二个div添加一些填充以说明固定div的存在。

Answer 2

这样做吗？

http://jsfiddle.net/Vqncx/

我刚刚给出'内容'DIV相对定位，顶部的y轴等于'nav'的高度，然后给'nav'一个z-index，使其保持在'内容的顶部' ”。

.nav {
 width: 100%;
 height: 50px;
 background: #000;
 position: fixed;
 z-index: 5;
}

.content {
 background: #ccc;
 width: 100%;
 height: 5000px;
 position: relative;
 top:50px;
}

Answer 3

你只需要在.content div中添加一个上限，等于.nav块的大小+一些填充：

.content {
    margin-top: 60px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

Answer 4

这是一种更灵活的实现方法，不需要知道固定div的高度（虽然它的语义较少）。

只需复制固定元素的标记即可。将第一个重复对的position设置为fixed，将第二个visibility设置为hidden（同时确保第二个元素的position未设置或relative）。这是一个例子：

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
}
.fixed{position:fixed}
.filler{visibility:hidden}

.content {
    background: #ccc;
    width: 100%;
}

<div class="nav fixed"></div>
<div class="nav filler"></div>
<div class="content">
  
  First<br />
  Second<br />
  Third<br />
  Fourth<br />
  Fifth<br />
  Sixth<br />
  Seventh<br />
  Eigth<br />
  Ninth<br />
  
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br />

  Last<br />

</div>

位置：固定垂直空间

4 个答案: