0

我有标题菜单 div，当我们向下滚动时它是固定的，在它旁边我有另一个 div，它将用于显示一些在我们向下滚动时固定的文本。接下来我有非固定内容的 div。我的问题是标题菜单 div(fixed) 与另一个 div(fixed) 重叠，并且两个固定 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>
4

1 回答 1

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/

于 2013-06-27T15:13:49.433 回答