Z指数和相对/绝对定位

Question

我在z-index和定位方面遇到了一些问题。基本上，当您将鼠标悬停在菜单项（主页，大约等）上时，应在菜单下方加载油漆溅：

http://www.saradouglas.net/home

Stylesheet is located here。

当每个splash div设置为绝对定位时，这工作正常，但我意识到这些将出现在不同屏幕分辨率的不同位置。我认为只是将其改为相对定位，然后相应地调整坐标。不幸的是现在我的飞溅不会出现在菜单下面，就像他们应该的那样。

为了澄清，我希望在菜单下显示飞溅 - 因此菜单应始终显示在飞溅的顶部。这只是一个问题，因为将菜单设置为相对，这些溅到绝对。

我希望这是一个简单的解决方法，我只是遗漏了一些东西。我希望有人能告诉我哪里出错了并提供解决方案！

到目前为止已经提交了一些很好的答案，但不幸的是他们没有解决我的问题。我已经尝试将菜单背景添加到ul类而不是div，但这对问题没有任何影响。

Answer 1

如果我没记错，z-indices的优先顺序是这样的：

• 画布（绘制元素的位置/父项可绘制区域）
• bg图片
• z-index：-1
• 默认（0）
• z-index：1+

当你给任何子元素一个z-index为-1时，由于父元素的优先级，它不会低于父元素的背景。

这是你的解决方案（只是在firebug上试过，它的工作原理）：

1. 从#menu中移除bg图像，并在div之前在ul.menu下添加单独的li。
2. 给下面的css这个div。
3. 现在给所有那些画笔笔画一个小于-1的z-index。 -2工作。

这应该是它。

CSS：

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

我知道它的语义不是那么多，但是，嘿它有效，对吗？ ：P

Answer 2

您应该在菜单div中设置相对位置，然后在菜单的div中添加绝对定位div。那么不同的屏幕分辨率就没问题了。

Answer 3

你可以通过在ul而不是<div id="menu">上设置bg，paddings和height来实现