CSS 如何“z-index”使菜单始终位于内容之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10507143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to "z-index" to make a menu always on top of the content
提问by rmz
I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If someone can help me I really appreciate it. Sorry for my English. Thanks in advance.
我有一个问题，我不知道如何解决这个问题。我想要的是“红色框”在 z-index 2 中保留在页面顶部，而背景上的所有内容都保留在索引 1 上，但不知何故此代码正在“折叠”图层。如果有人可以帮助我，我真的很感激。对不起我的英语不好。提前致谢。
<html>
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
#container {
position: absolute;
float: right;
z-index: 1;
}
.left1 {
background-color: blue;
height: 50px;
width: 100%;
}
.left2 {
background-color: green;
height: 50px;
width: 100%;
}
#right {
background-color: red;
height: 300px;
width: 300px;
float:right;
z-index: 999999;
margin-top: 0px;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>
</body>
</html>
采纳答案by rafaelbiten
You most probably don't need z-index to do that. You can use relative and absolute positioning.
您很可能不需要 z-index 来做到这一点。您可以使用相对定位和绝对定位。
I advice you to take a better look at css positioning and the difference between relative and absolute positioning... I saw you're setting position: absolute; to an element and trying to float that element. It won't work friend! When you understand positioning in CSS it will make your work a lot easier! ;)
我建议您更好地了解 css 定位以及相对定位和绝对定位之间的区别...我看到您正在设置 position: absolute; 到一个元素并尝试浮动该元素。它不会工作的朋友！当您了解 CSS 中的定位后，您的工作就会轻松很多！;)
回答by Tarek Kalaji
you could put the style in container div menu with:
您可以将样式放入容器 div 菜单中：
<div style="position:relative; z-index:10">
...
<!--html menu-->
...
</div>
before
前
after
后
回答by adedoy
Ok, Im assuming you want to put the .left inside the container so I suggest you edit your html. The key is the position:absoluteand right:0
好吧，我假设你想把 .left 放在容器里，所以我建议你编辑你的 html。关键是position:absolute和right:0
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 999999;
margin-top: 0px;
position: absolute;
right:0;
}
here is the full code: http://jsfiddle.net/T9FJL/
这是完整的代码：http: //jsfiddle.net/T9FJL/
回答by creativeby
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 9999;
margin-top: 0px;
position: absolute;
top:0;
right:0;
}
position: absolute; top:0; right:0; do the work here! :) Also remove the floating!
位置：绝对；顶部：0; 右：0; 在这里工作！:) 也去掉浮动！
