Z指数和相对/绝对定位

时间:2012-04-25 20:00:12

标签: css positioning z-index relative absolute

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

http://www.saradouglas.net/home

Stylesheet is located here

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

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

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

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

3 个答案:

答案 0 :(得分:14)

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

  • canvas(绘制元素/父项可绘制区域)
  • bg images
  • z-index:-1
  • 默认(0)
  • z-index:1+

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

这是你的解决方案(只是尝试使用firebug并且有效):

  1. #menu移除bg图片,并在div之前的ul.menu下添加单独的li
  2. 将以下css提供给此div
  3. 现在给所有笔刷笔画z-index小于-1。 -2工作。
  4. 那应该是它。

    <强> CSS:

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

    我知道它的语义不是那么多,但是,嘿它有效,对吗? :P

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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