带有 jQuery ColorBox 的 21 个 WordPress 主题的 z-index 问题答案

【问题标题】：z-index issue on Twenty Eleven WordPress theme with jQuery ColorBox带有 jQuery ColorBox 的 21 个 WordPress 主题的 z-index 问题
【发布时间】：2012-02-03 20:34:34
【问题描述】：

http://allmyzip.com/colorbox1/ 上有一个简单的图片库，其中包含用于 Wordpress 的 jQuery Colorbox/Lightbox 插件，当单击其中一个缩略图时，它会打开一个 500 x 500 图像的自动运行幻灯片。

该站点使用的是 Wordpress 3.3.1 和标准的、未经修改的 211 版本 1.3 主题，默认情况下是新的 Wordpress 安装。在 IE 9、Firefox 10 和 Chrome 中 16 所有三个浏览器都在标题/导航栏后面显示幻灯片图像。

我已经对此进行了数小时的研究，但找不到要更改的内容和/或在哪里更正此问题。我创建了一个简单的子主题，以尝试在下面显示的 style.css 部分中测试 z-index 值的某些更改，正如一些研究建议所推荐的那样，但将 z-index 值更改为 2 或 999 或99999 仍然无法正确显示幻灯片中的图像。因此，运行该网站的所有 CSS 都是 100% 标准的、开箱即用的 21 个 CSS 代码。

子主题中的简单代码仅限于您在下面看到的内容：目前标准代码没有任何更改。下面显示的是我尝试过的地方以前的编辑，然后将设置恢复为标准：

`@import url("../twentyeleven/style.css");

#branding {border-top: 2px 实心#bbb; padding-bottom: 10px;位置：相对； z-index: 9999;}

关于需要编辑什么以及在哪里编辑的任何细节？

非常感谢！！

【问题讨论】：

该网站 (allmyzip.com/colorbox1) 是有问题的网站吗？我看不出显示器有任何问题；尽管没有模态效果，但图像在灯箱中显示良好。
是的，上面的站点就是站点。请参阅此页面：allmyzip.com/image-behind-header 以获取页面上下滚动时问题的屏幕截图。谢谢！！

标签： wordpress z-index colorbox

【解决方案1】：

标头 id=branding 的 z-index 为 9999，与灯箱相同，因此我预计会发生冲突。

将其更改为 5000 或其他值，我在 firebug 中看到它可以解决问题。

【讨论】：

@RiverC 的上述回答是对所提问题的正确回答。值从 9999 更改为 5000 后，幻灯片图像开始正确显示在标题/导航栏的前面，而不是在它们后面。非常感谢您对所提问题的快速准确回答。非常感谢！！
这似乎是所谓的“默认”主题 TwentyEleven 的问题——拥有一个包含基本不兼容性的默认主题是多么愚蠢，比如将标题强制放在所有内容的顶部！我希望有人能抓住它并为 TwentyTwelve 修复它。

【解决方案2】：

在我看来

.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
border-image: initial;
}

可能需要包含

position:absolute;
z-index:20;

【讨论】：