7

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

http://www.saradouglas.net/home

样式表位于此处。

当每个启动 div 设置为绝对定位时，这工作得很好，但我意识到这些会以不同的屏幕分辨率出现在不同的地方。我认为这只是将其更改为相对定位，然后相应地调整坐标的情况。不幸的是，现在我的飞溅没有像他们应该的那样出现在菜单下。

为了澄清，我希望飞溅出现在菜单下 - 所以菜单应该始终出现在飞溅的顶部。自从将菜单设置为相对后，这才成为一个问题，并且这些飞溅为绝对。

我希望这是一个简单的修复，我只是错过了一些东西。我希望这里有人可以告诉我哪里出错并提供解决方案！

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

4

3 回答 3

15

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

  • 画布（绘制元素的地方/父级可绘制区域）
  • bg 图片
  • z 指数：-1
  • 默认 (0)
  • z-index: 1+

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

这是您的解决方案（刚刚在 firebug 上尝试过，它可以工作）：

  1. 从 's之前删除 bg 图像并在 's下#menu添加一个单独的图像。divul.menuli
  2. 将下面的 css 给 this div。
  3. 现在给所有这些画笔描边一个z-index小于 -1 的值。-2 作品。

应该就是这样。

CSS：

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

我知道它没有那么多语义但是，嘿，它有效，对吧？:P

于 2012-04-26T19:34:04.260 回答
1

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

于 2012-04-25T20:19:07.953 回答
0

您可以通过简单地在 ul 上设置 bg、paddings 和 height 而不是<div id="menu">

于 2012-04-25T20:24:12.840 回答