需要 CSS 专家 - 我的页面设计中的 Z-Index 堆栈问题
基本上我在 Z-Index 方面遇到了一些问题。虽然我在 CSS 方面并不出色，但我认为我相当不错，但确实无法解决这个问题。
您将在 URL 中看到...
...我的问题是返回的“热门”结果中的链接不可点击或任何其他内容。我得出的结论是，这是由于他们的 Z-Index 被搞乱了。我必须摆弄和调整 Z-Index 才能让选项卡 - 热门、最高评价、精选等 - 显示在 codebg div 上方。
当我调整 Z-Index 以使结果绝对位于顶部时，它们表现得像正常一样 - 可以选择文本、悬停评级图像等。然而，这样做的缺点是我的“热门”、“最高评价”、“精选”选项卡全部放置在返回结果的背景图像下方。
如果有人可以发布解决方法或对我的 CSS 进行更改，我将不胜感激。
请不要忘记这是一个测试站点和设计，任何其他 URL 可能都不起作用，我还没有上传任何数据库配置或其他什么！
附上几个屏幕截图来澄清我的意思：
谢谢大家！
Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.
You'll see at the URL...
... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.
When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.
If anyone can post a workaround or alteration to my CSS that would be much appreciated.
Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!
Attached are a couple of screenshots to clarify what I mean:
This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):
This is what DOES happen when I adjust the Z-Index properties (I don't want this!):
Thanks y'all!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您需要
从您的
.codebg类中删除此：，这将导致上面的#2 屏幕截图。 （顺便说一句，子级的 z-index 不能高于父级，因此.codbg内的所有内容都是-1，位于页面后面）然后，您需要修复选项卡图像:) 问题不在于它们位于背景后面，而在于它们是透明的，并且在较暗的背景上看起来更暗。这是图像（一旦更新，直接指向它，此答案可能会发生变化）：alt text http: //howcode.com/images/tabs.png
由于白色背景，它们在这里看起来很好，但是如果您在编辑器中打开它们，您会看到它们是透明的，只需将三个选项卡设为透明即可完全（或至少更加）不透明，因为这似乎就是您所追求的。
You need to remove this:
From your
.codebgclass, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside.codbgis-1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):alt text http://howcode.com/images/tabs.png
They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.
这不是最好的解决方案，但就这样。
变成这样
然后添加到#tabs
到#content
这是一个快速而肮脏的修复。否则你必须重新考虑你的整个布局
not the best solution but here it goes.
becomes this
then add to #tabs
to #content
this is a quick and dirty fix. otherwise you have to rethink your whole layout
您还可以将
code-bg中的background-image放在content上，并调整内容的宽度和边框半径You could also put your
background-imagefromcode-bgoncontentinstead, and adjust content's width and border-radius