CSS Z-Index 和相对/绝对定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10322868/
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
Z-Index and Relative/Absolute Positioning
提问by rossautomatica
I'm having some problems with z-index and positioning. Basically, when you hover over the menu items (home, about etc), paint splashes should load underneath the menu:
我在 z-index 和定位方面遇到了一些问题。基本上，当您将鼠标悬停在菜单项（主页、关于等）上时，油漆飞溅应加载到菜单下方：
http://www.saradouglas.net/home
http://www.saradouglas.net/home
This worked fine when each splash div was set to absolute positioning, but I realised that these would appear in different places in different screen resolutions. I thought it would just be a case of changing this to relative positioning, and then adjusting the co-ordinates accordingly. Unfortunately now my splashes don't appear under the menu, like they should.
当每个初始 div 设置为绝对定位时，这工作正常，但我意识到这些会出现在不同屏幕分辨率的不同位置。我认为这只是将其更改为相对定位，然后相应地调整坐标的情况。不幸的是，现在我的飞溅没有像他们应该的那样出现在菜单下。
To clarify, I want the splashes to appear under the menu - so the menu should always appear on top of the splashes. This has only become a problem since setting the menu to relative, and these splashes to absolute.
澄清一下，我希望飞溅出现在菜单下 - 所以菜单应该总是出现在飞溅的顶部。自从将菜单设置为相对，而这些飞溅设置为绝对后，这才成为一个问题。
I'm hoping this is a simple one to fix and I'm just missing something. I'm hoping someone here can tell me where I've gone wrong and offer a solution!
我希望这是一个简单的修复，我只是错过了一些东西。我希望这里有人可以告诉我哪里出了问题并提供解决方案！
There have been some good answers submitted so far but unfortunately they have not fixed my problem. I have tried adding the menu background to the ul class rather than the div, but this has made no difference to the problem.
到目前为止已经提交了一些很好的答案，但不幸的是他们没有解决我的问题。我尝试将菜单背景添加到 ul 类而不是 div，但这对问题没有影响。
回答by Ege
If I recall correctly the precedence order of z-indices is something like this:
如果我没记错的话，z 索引的优先顺序是这样的：
- canvas (where the element is drawn / parents drawable area)
- bg images
- z-index: -1
- default (0)
- z-index: 1+
- 画布（绘制元素的位置/父级可绘制区域）
- 背景图片
- z-索引：-1
- 默认 (0)
- z-索引：1+
When you give any child element a z-indexof -1, it won't go below the parent's background because of the parent's precedence.
当您将任何子元素的 az-index设为 -1 时，由于父元素的优先级，它不会低于父元素的背景。
Here is your solution (just tried on firebug and it works):
这是您的解决方案（刚刚在 firebug 上尝试过并且有效）：
- Remove the bg image from
#menuand add a separatedivunder theul.menubefore theli's. - Give the css below to this
div. - Now give all those brush strokes a
z-indexsmaller than -1. -2 works.
- 从 中删除 bg 图像
#menu并div在ul.menu之前添加一个单独li的。 - 给这个下面的css
div。 - 现在给所有这些画笔描边一个
z-index小于 -1 的值。-2 作品。
And that should be it.
应该就是这样。
CSS:
CSS：
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);
I know it's not that much semantic but, hey it works, right? :P
我知道它没有那么多语义但是，嘿它有效，对吧？:P
回答by Mateusz Rogulski
You should set position relative in your menu div, then add absolute positioning divs in menu's div. then the different screen resolutions it isn't problem.
您应该在菜单 div 中设置相对位置，然后在菜单的 div 中添加绝对定位 div。那么不同的屏幕分辨率不是问题。
回答by simoncereska
You can do it by simply setting bg, paddings and height on ul instead of <div id="menu">
您可以通过简单地在 ul 上设置 bg、paddings 和 height 而不是 <div id="menu">
