需要 CSS 专家 - 我的页面设计中的 Z-Index 堆栈问题

Question

基本上我在使用 Z-Index 时遇到了一些问题。虽然我在 CSS 方面并不出色，但我认为我相当不错，但我真的无法解决这个问题。

您将在 URL 中看到...

http://howcode.com/code/

...我的问题是返回的“热门”结果中的链接不可点击或其他任何内容。我得出结论，这是因为他们的 Z-Index 被搞砸了。我不得不摆弄和调整 Z-Index 以获得标签 - 热门，最高评分，精选等 - 显示在 codebg div 上方。

当我调整 Z-Index 以使结果绝对位于顶部时，它们表现正常 - 可以选择文本，评级图像悬停等等。然而，这样做的缺点是我的热门，最高评级, 精选标签全部放置在返回结果的背景图片下方。

如果有人可以发布解决方法或对我的 CSS 进行更改，我们将不胜感激。

请不要忘记这是一个测试站点和设计，任何其他 URL 都可能无法正常工作，我还没有上传任何数据库配置或其他内容!

附上几个屏幕截图以阐明我的意思:

1. 这就是我想要发生的事情(并不是说这个截图链接实际上是不可点击的，只是为了演示我的观点):

2. 这就是我调整 Z-Index 属性时发生的事情(我不想要这个!):

谢谢大家!

Answer 1

你需要删除这个:

z-index: -1 !important;

来自您的 .codebg 类，这将导致上面的 #2 屏幕截图。 (作为旁注， child 的 z-index 不能高于他们的 parent ，所以 .codbg 中的所有内容都是 -1，在页面后面)然后，你需要修复选项卡图像 :) 问题不在于它们在背景后面，而是它们是透明的，并且在较暗的背景之上看起来更暗。这是图片(一旦你更新它，这个答案可能会改变，直接指向它):

alt text http://howcode.com/images/tabs.png

它们在这里看起来不错，因为背景是白色的，但是如果你在编辑器中打开它们，你会看到它们是透明的，只需将三个选项卡完全(或至少更)不透明，因为这似乎成为你所追求的。