jQuery Cycle插件z-index浮动问题答案

【问题标题】：jQuery Cycle plugin z-index float problemjQuery Cycle插件z-index浮动问题
【发布时间】：2009-05-18 11:55:34
【问题描述】：

当我尝试在我的 jQuery Cycle 元素上放置一个元素时，它不起作用。该元素始终位于 jQuery 循环元素之后。我使用浮动：对；定位元素，并将其 z-index 设置为 100000，但无济于事。

Firebug 将 Cycle 元素及其子元素视为具有较低的 z 索引，并显示浮动元素位于正确的位置。

该元素永远不会显示在自行车图像上方。

<!-- the cycling set -->
<div id='headerimages'>
    <img src='images/header1.jpg' alt='' style='' />
    <img src='images/header2.jpg' alt='' style='' />
    <img src='images/header3.jpg' alt='' style='' />
</div>
<!-- the floating element -->
<img src='images/logotransparent.png' alt='' id='logo' />

【问题讨论】：

这个问题为人们提供了一些有趣的“答案” >= 10k rep :)

标签： jquery html css cycle

【解决方案1】：

浮动不会触发 z-index，只会触发
Position: Relative 和 position: Absolute

所以试试这些......你可能想尝试添加position:relative，
它在大多数情况下不会影响任何事情，但可以让您访问 z-index

【讨论】：

谢谢！ CSS 不符合我的想法。它的水平很高，但似乎有非常挑剔的要求。我不太明白，我是第一个承认的。您的解决方案完美运行。知道为什么元素需要它吗？我虽然位置：相对；是默认的吗？
不，位置：静态是默认值。这就是 CSS 世界的法则，即只有相对和绝对才有 z-index。这有点道理..

【解决方案2】：

我知道这是一个旧线程......但想把它放在这里......我在我的网站中使用了演示周期并遇到了类似的问题，尝试了这里建议的解决方案......我改变了我自己的css文件中很多地方的z-index....但最后发现问题出在循环本身的css中......更改其中的z-index有助于解决我的问题。

【讨论】：

【解决方案3】：

我遇到了同样的问题，但对我来说最终的解决方法是将我想要浮动在动画上方的事物的 z-index 设置为一个非常高的数字（在我的情况下为 100）。 Cycle 似乎分配了它自己的 z-index（它们是个位数，但仍然大于 1 或 2，这是我最初设置浮动对象的 z-index 的位置）。

【讨论】：

【解决方案4】：

只需将 z-index 样式添加到循环容器

.cycle-slideshow {
 z-index: 0; // or any smaller value to the covered div's
}

详情见Displaying a div at a z-index above a jQuery Cycle slide show

【讨论】：