Z指数和相对/绝对定位

我有一些Z指数和定位问题。基本上，当你将鼠标悬停在菜单项（家庭，约等），涂料飞溅应该加载菜单下：Z指数和相对/绝对定位

http://www.saradouglas.net/home

样式表位于：http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css

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

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

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

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

在此先感谢。

罗斯

来源

2012-04-25 rossautomatica

哪个样式表是油漆溅入的？ – 2012-04-25 20:04:45

http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css – rossautomatica 2012-04-25 20:05:40

这不是你的问题的答案，而是一般的反馈。我建议一次加载这些'spans'的背景......在用户悬停一个菜单项后，他们的浏览器请求图像......只需将'background'属性移动到'span'不行到'a：hover span'...因此所有的图像将被立即加载。 – skip405 2012-04-25 20:17:28

如果我没有记错的z索引的优先顺序做的是这样的

帆布（其中元件被吸入/父母可绘制区域）
BG图像
z索引：-1
默认（0）
的z-index：1+

所以，当你给孩子的任何元素的-1 z-index的，它不会因为父母的优先下面的父母背景。

这是您的解决方案。刚刚尝试过萤火虫，它的工作原理：

从#menu中删除bg图像，并在LI之前的ul.menu下添加一个单独的div。
给这个div下面的CSS。
现在给所有这些画笔描边一个小于-1的z-index。 -2工程。

而且应该是这样。

CSS：

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

我知道这是没有那么多的语义，但是，嘿它的工作原理，对不对？：P

来源

2012-04-26 19:34:04 Ege

嗨 - 感谢您的回答，特别感谢您的深入。不幸的是，我仍然有相同的Z指数问题！你会如此友善来检查我是否可能遗漏了一些东西？ – rossautomatica 2012-04-26 19:41:56

是的，在ul中添加＃menu-separator，而不是在兄弟旁边。＃menu-separator应该是ul的子节点。 – Ege 2012-04-26 19:44:32

完美。我现在只需要在ul上做一些工作，使它看起来是这样，但是这回答了我的问题。谢谢！ – rossautomatica 2012-04-26 19:48:21

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

来源

2012-04-25 20:19:07

这回答我的定位问题，但现在飞溅出现在菜单上方... – rossautomatica 2012-04-25 20:21:46

它完全一样:) – 2012-04-25 20:23:13

感谢您的帮助 - 但是，飞溅出现在菜单顶部，但它们应该在菜单下。你知道我该如何解决这个问题吗？ – rossautomatica 2012-04-25 20:28:41

您可以通过简单的设置BG，填充和高度上的UL，而不是<div id="menu">

来源

2012-04-25 20:24:12 simoncereska

嗨Simon，谢谢你的回答。我尝试过 - 我在'菜单'ul上设置了bg，paddings＆height而不是div，但它给了我目前的完全相同的结果。我现在已经恢复到我原来的代码，所以我不幸没有进一步前进。也许我误解了你的答案？ – rossautomatica 2012-04-26 18:35:34

Z指数和相对/绝对定位

回答

相关问题