Question

我有标题菜单div，当我们向下滚动时它是固定的，在我旁边有另一个div，它将用于显示我们向下滚动时固定的一些文本。接下来我有非固定内容div。我的问题是标题菜单div（固定）与另一个div（固定）重叠，并且两个固定div都由非固定div内容重叠。如何解决这种重叠，如何按顺序显示数据：第一个固定div和第二个固定div然后是非固定div内容。请建议我你宝贵的解决方案。

仅供参考：我也试过“清楚：两者”。

以下是示例内容

<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

为了有效地使用位置：固定你应该伴随它有顶部和左侧的定位样式。

有了这个并知道固定元素的高度，你可以将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/

如何显示标题内容而不与非固定内容重叠

1 个答案: