如何在不与非固定内容重叠显示页眉内容 [英] How to display header content without overlapping with non fixed content

问题描述

当我们向下滚动，这是固定的，旁边

我标题菜单的div我有将用于显示一些文本，当我们向下滚动，这是固定的另一个div。接下来我有非固定内容股利。我的问题是标题菜单格（固定）与另一个div重叠（固定）和两个固定div的是由非固定的DIV内容重叠。我怎样才能解决这个重叠的，我怎么能为了显示数据：1固定股利和第二次固定股利再非固定DIV的内容。请给我建议你有价值的解决方案。

FYI：我曾尝试与明确：既。还

以下是示例内容

 ＆LT; D​​IV ID =dvHeaderMenu的风格=的位置是：固定＆GT;
    ＆LT; UL＆GT;
        ＆LT;立GT;
            测试＆LT; /李＆GT;    ＆LT; / UL＆GT;＆LT; / DIV＆GT;  ＆LT; D​​IV CLASS =清除＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =dvanotherContentwithFixed的风格=的位置是：固定＆GT;
英特尔推出经济实惠的Haswell微处理器在九月。
＆LT; / DIV＆GT;  ＆LT; D​​IV CLASS =清除＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =NonFixedContent＆GT;
英特尔公司计划基于Haswell的微架构今年九月，如果从presumably Intel的文档中的提取物被认为是引进实惠微处理器。世界第一大芯片制造商将推出一批将属于酷睿i3和奔腾产品系列新的微处理器。如果该文件是最新的和Intel的计划不会改变，那么2013年9月1日，全球最大的芯片制造商将推出酷睿i7-4771，酷睿i5-4440，酷睿i5-4440S，酷睿i3-4340 ，酷睿i3-4330，酷睿i3-4330T，酷睿i3-4130，酷睿i3-4130T，奔腾G3430，奔腾G3420，奔腾G3220，奔腾G3420T以及奔腾G3220T基于Haswell的微架构。该公司还将增加新的酷睿i5-3340，酷睿i5-3340S，赛扬G1630，G1620赛扬和Celeron G1620T基于Ivy Bridge的微架构。有趣的是，要注意的是，上述微处理器将在9月1日公布，但只会变得可用上启动该日亚洲市场。在欧洲，中东，非洲，北美和拉丁美洲的新芯片将只能从2013年9月29日开始。新实惠微处理器基于英特尔的Haswell微架构的出现将标志着previous代产品，包括基于Sandy Bridge的和Ivy Bridge的设计，那些结束的开始。随着英特尔扩大了新一代微处理器的可用性，就必须收缩早期中央处理单元出货量。英特尔没有在新闻报道发表评论。
＆LT; / DIV＆GT;
 

解决方案

为了有效地使用位置：固定你应该定位样式像顶伴随着它和左

这一点，并了解固定元素的高度，可以应用填充顶静态（非固定）元素。

  #dvHeaderMenu {
    顶部：0;
    宽度：100％;
    高度：50像素;
    的z-index：2;
    背景：#CCCCFF;
}
#dvanotherContentwithFixed {
    顶部：50像素;
    宽度：100％;
    高度：20像素;
    的z-index：2;
    背景：#FFCCCC;
}
#NonFixedContent {
    填充顶：70像素;
}
 

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

I have header menu div which is fixed when we scroll down and next to that i have another div which will be used to display some text which is fixed when we scroll down. Next i have non fixed content div. My problem is header menu div(fixed) is overlapping with another div(fixed) and both fixed div's are overlapping by non-fixed div content. How can i resolve this overlapping and how can i display the data in order :1st fixed div and 2nd fixed div then non fixed div content. Please suggest me your valuable solution.

FYI: i have tried with "clear:both" also.

The following is the sample content

<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>

解决方案

In order to effectively use position: fixed you should accompany it with positioning styles like top and left.

With that and knowing the height of the fixed elements, you can apply padding-top to the static (non-fixed) element.

#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;
}

Example: http://jsfiddle.net/cjmvV/

这篇关于如何在不与非固定内容重叠显示页眉内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！