Question

基本上我在使用Z-Index时遇到了一些问题。虽然我对CSS并不陌生，但我觉得我相当不错，但真的无法解决这个问题。

你会在网址上看到......

http://howcode.com/code/

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

当我调整Z-Index以便结果肯定在顶部时，他们的行为正常 - 可以选择文本，评级图像徘徊等等。但是这样做的缺点是我的热门，评分最高，特色标签全部放在背景图像的BENEATH返回结果。

如果有人可以发布我的CSS的变通方法或更改，那将非常感激。

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

附上一些屏幕截图，以澄清我的意思：

这就是我想要发生的事情（不是实际上在这个截图链接中不是可点击的，只是为了演示我的观点）： what i want http://i39.tinypic.com/20usq36.png
这是我调整Z-Index属性时会发生的事情（我不想要这个！）： oh noes! http://i39.tinypic.com/2z6hwsx.png

谢谢你们！

Answer 1

您需要删除此内容：

z-index: -1 !important;

从您的.codebg课程中，这将导致上面的＃2屏幕截图。（作为旁注，孩子们的z-index不能比他们的父级更高，所以.codbg里面的所有内容都是-1，在页面后面）然后，你需要修复标签图片:)问题不在于它们落后于背景，而是它们是透明的，并且在较暗的背景上看起来更暗。这是图像（一旦你更新它，可以在这个答案中改变，直接指向它）：

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

由于白色背景，它们在这里看起来很好，但是如果你在编辑器中打开它们，你会看到它们是透明的，只是让三个标签完全（或至少更多）不透明，因为它似乎是你所追求的。

Answer 2

不是最好的解决方案，但在这里。

在内容div内移动标签div之后的codebg，所以这个

<div id="content">
  <div id="tabs">
  </div>
  <div id="codebg">
  </div>
</div

变成这个

<div id="content">
  <div id="codebg">
  </div>
  <div id="tabs">
  </div>
</div

然后添加到#tabs

的位置是：绝对的;顶部：232px;

到#content

填充顶：53px;

这是一个快速而肮脏的修复方法。否则你必须重新考虑整个布局

Answer 3

您也可以将background-image从code-bg改为content，然后调整内容的宽度和边框半径

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

3 个答案: