CSS - 使内容出现在固定DIV元素下面 [英] CSS - Make Content Appear Beneath a Fixed DIV Element
问题描述
我的目的是在页面顶部创建一个菜单，即使用户滚动，页面顶部仍会保留（如Gmail的最近功能，其中常用的按钮向下滚动用户，以便允许他们可以对邮件执行操作，而无需滚动到页面顶部）。
我也想将下面的内容设置为显示在下面
我的目标是这样的：
+ ________________________ +
| MENU | < ---固定菜单 - 即使在滚动时也保持在顶部。
+
| CONTENT BEGINS |
|这里|
| |
| |
| |
| |
| |
| |
+ - - - - - - - 。
我希望顶部的菜单不会移动，而是停留在页面的顶部，即使用户向下滚动。我还希望当用户在页面的顶部时，主菜单开始位于菜单下方，但是当用户向下滚动时，如果菜单超过内容的顶部，则无关紧要。 p>
摘要：
- 我希望有一个固定位置菜单
- 当用户在页面顶部时，内容必须出现在菜单下方。
- 当用户向下滚动时，菜单可能会与内容重叠。
有人可以解释如何达到这个目的吗？
谢谢。
UPDATE：
CSS代码：
code> #floatingMenu {
clear：both;
position：fixed;
width：85％;
background-color：＃78AB46;
top：5px;
}
HTML代码：
< div id =floatingMenu>
< a href =http://www.google.com>测试1< / a>
< a href =http://www.google.com>测试2< / a>
< a href =http://www.google.com>测试3< / a>
< / div>
目前，我可以将菜单显示在页面顶部，在我的容器 div 内。但是，内容在菜单后面。我已经设置 clear：both; ，这没有帮助。
你需要的是一个额外的间距div（就我的理解你的问题）。
这个div将放置在菜单和内容之间，
HTML
< div id =fixed-menu>
导航选项或任何。
< / div>
< div class =spacer>
& nbsp;
< / div>
< div id =content>
内容。
< / div>
CSS
＃fixed-menu
{
position：fixed;
width：100％;
height：75px;
background-color：＃f00;
padding：10px;
}
.spacer
{
width：100％;
height：95px;
}
查看我的示例这里。
这是通过偏移nav div所占用的空间，因为它具有 position：fixed; 已从文档流程中取出。
实现这种效果的首选方法是在内容封装器上使用 margin-top：95px; / * your nav height * / 。 >
My intention is to create a menu at the top of the page which remains at the top of the page even when the user scrolls (like Gmail's recent feature which has the commonly-used buttons scrolling down with the user so that it allows them to perform operations on messages without having to scroll to the top of the page).
I would also like to set the content below said menu to appear below it - at present, it appears behind it.
I am aiming for something like this:
+________________________+
| MENU | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
| CONTENT BEGINS |
| HERE |
| |
| |
| |
| |
| |
| |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ <--- Bottom of page.
I hope to have the menu at the top which never moves and which stays at the top of the page, even when the user scrolls down. I am also looking to have the main content begin beneath the menu when the user is at the top of the page, but when the user scrolls down, then it doesn't matter if the menu goes over the top of the content.
Summary:
- I wish to have a fixed position menu at the top of the page which follows the user when scrolling.
- Content must appear BELOW the menu ONLY when the user is at the top of the page.
- When the user scrolls down, the menu may overlap the content.
Can somebody please explain how to achieve this?
Thank you.
UPDATE:
CSS Code:
#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}
HTML Code:
<div id="floatingMenu">
<a href="http://www.google.com">Test 1</a>
<a href="http://www.google.com">Test 2</a>
<a href="http://www.google.com">Test 3</a>
</div>
At present, I can get the menu to appear at the top of the page and centered by placing it inside my container div. However, the content goes behind the menu. I have set clear: both; and this has not helped.
What you need is an extra spacing div (as far as I understood your question).
This div will be placed between the menu and content and be the same height as the menu div, paddings included.
HTML
<div id="fixed-menu">
Navigation options or whatever.
</div>
<div class="spacer">
</div>
<div id="content">
Content.
</div>
CSS
#fixed-menu
{
position: fixed;
width: 100%;
height: 75px;
background-color: #f00;
padding: 10px;
}
.spacer
{
width: 100%;
height: 95px;
}
See my example here.
This works by offsetting the space that would have been occupied by the nav div, but as it has position: fixed; it has been taken out of the document flow.
The preferred method of achieving this effect is by using margin-top: 95px;/*your nav height*/ on your content wrapper.
这篇关于CSS - 使内容出现在固定DIV元素下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
