Z指数和相对/绝对定位

ros*_*ica 6 css positioning z-index

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

http://www.saradouglas.net/home

样式表位于此处.

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

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

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

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

Ege*_*Ege 14

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

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

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

这是你的解决方案(只是在firebug上尝试过它有效):

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

这应该是它.

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);
Run Code Online (Sandbox Code Playgroud)

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