如何在不与固定内容重叠的情况下显示表头内容

Question

我有标题菜单div，当我们向下滚动时，它是固定的，旁边我有另一个div，它将用于显示一些文本，这是固定的，当我们向下滚动。接下来我有一个非固定内容的div。我的问题是标题菜单div (固定的)与另一个div(固定的)重叠，并且两个固定的div都被非固定的div内容重叠。如何解决这种重叠以及如何按顺序显示数据:第一个固定的div和第二个固定的div，然后是非固定的div内容。请向我推荐您有价值的解决方案。

仅供参考:我也尝试过"clear:both“。

以下是示例内容

<div id="dvHeaderMenu" style="position:fixed">
    <ul>
        <li>
            Test</li>

    </ul>

</div> 

  <div class="clear">
</div>


<div id="dvanotherContentwithFixed" style="position:fixed">
Intel to Introduce Affordable “Haswell” Microprocessors in September.
</div> 

  <div class="clear">
</div>
<div id="NonFixedContent">
Intel Corp. intends to introduce affordable microprocessors based on Haswell micro-architecture this September, if an extract from a presumably Intel’s document is to be believed. The world’s No. 1 maker of chips will introduce a number of new microprocessors that will belong to Core i3 and Pentium product families.

In case the document is up to date and plans of Intel’s are not going to change, then on September 1, 2013, the world’s largest chipmaker will introduce Core i7-4771, Core i5-4440, Core i5-4440S, Core i3-4340, Core i3-4330, Core i3-4330T, Core i3-4130, Core i3-4130T, Pentium G3430, Pentium G3420, Pentium G3220, Pentium G3420T as well as Pentium G3220T based on Haswell micro-architecture. The company will also add new Core i5-3340, Core i5-3340S, Celeron G1630, Celeron G1620 and Celeron G1620T based on Ivy Bridge micro-architecture.

It is interesting to note that the aforementioned microprocessors will be announced on September 1, but will only become available on Asian markets starting that date. In Europe, Middle-East, Africa, North America and Latin America the new chips will be available only starting from September 29, 2013.



The emergence of new affordable microprocessors based on Intel Haswell micro-architecture will mark the beginning of the end of previous-generation products, including those based on Sandy Bridge and Ivy Bridge designs. As Intel widens availability of new-generation microprocessors, it will have to shrink shipments of earlier central processing units.

Intel did not comment on the news-story.
</div>

Answer 1

为了有效地使用position: fixed，你应该同时使用top和left这样的定位样式。

知道了固定元素的高度后，就可以对静态(非固定)元素应用padding-top了。

#dvHeaderMenu {
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    background: #CCCCFF;
}
#dvanotherContentwithFixed {
    top: 50px;
    width: 100%;
    height: 20px;
    z-index: 2;
    background: #FFCCCC;
}
#NonFixedContent {
    padding-top: 70px;
}

示例：http://jsfiddle.net/cjmvV/