Z指数和相对/绝对定位 [英] Z-Index and Relative/Absolute Positioning
问题描述
我有一些z-index和定位的问题。基本上，当你将鼠标悬停在菜单项（主页，关于etc等）上时，应该在菜单下面加载油漆飞溅：
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:
http://www.saradouglas.net/home
样式表位于此处： http://www.saradouglas.net/wp-content/themes/ sara-douglas-theme / style.css
当每个splash div设置为绝对定位时，这个工作很好，但我意识到这些会出现在不同的不同屏幕分辨率的地方。我认为这只是将其改变为相对定位，然后相应地调整坐标的情况。不幸的是，我的飞溅不会出现在菜单下，像他们应该的。
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.
为了澄清，我想让飞溅出现在菜单下 - 所以菜单应该总是出现在飞溅的顶部。这只是一个问题，因为将菜单设置为相对，这些飞溅到绝对。
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!
到目前为止已经提交了一些很好的答案，但不幸的是他们没有固定我的问题。我尝试添加菜单背景到ul类，而不是div，但这对问题没有任何区别。
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.
提前感谢。
罗斯
推荐答案
如果我正确回忆起Z-索引的优先级顺序
If I recall correctly the precedence order of z-indexes is something like this
- 画布（绘制元素的位置/父项可绘制区域）
- li>
- z-index：-1
- 预设（0）
- z-index：1+
- canvas (where the element is drawn / parents drawable area)
- bg images
- z-index: -1
- default (0)
- z-index: 1+
因此，当给任何子元素z-index为-1时，由于父级优先级，它不会低于父级背景。
So when you give any child element a z-index of -1, it won't go below the parents background because of the parents precedence.
这里是您的解决方案。只是尝试firebug，它的工作原理：
Here is your solution. Just tried on firebug and it works:
- 从#menu中删除bg图像，并在ul.menu之前添加一个单独的div 。
- 将CSS放在这个div。
- 现在给所有这些笔触，z指数小于-1。 -2。
这应该是。
CSS：
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);
我知道这不是很多语义，但是它工作，对不对？ ：P
I know it's not that much semantic but, hey it works, right? :P
这篇关于Z指数和相对/绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
