jQuery Cycle插件z-index浮动问题

Question

当我试图将一个元素放在jQuery Cycle元素的顶部时，它无法正常工作。该元素始终在jQuery Cycle元素的后面。我使用float: right;来定位元素，并将其z-index设置为100000，但仍然无效。

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

该元素从未显示在Cycling图像的上方。

<!-- 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' /> 

- Antony Carthy

---

这个问题对于声望值 >= 10k 的人有一些有趣的“答案” :) - alex

Answer 1

当元素的位置属性为float时，无法触发z-index，只有当元素的位置属性为Position: Relative或者position: Absolute时才能使用。

因此，你可以尝试添加position:relative属性，这通常不会对页面产生影响，但是它将使你可以使用z-index属性。

- vsync

---

谢谢！CSS对我来说有点难以理解。它的抽象程度很高，但要求却非常苛刻。我并不完全理解它，也毫不掩饰地承认这一点。你的解决方案完美地起作用了。你知道为什么一个元素需要那个吗？我原以为position: relative;是默认值呢？ - Antony Carthy

不，position: static是默认值。这是CSS世界的规则，只有relative和absolute才有z-index。这种规定还是有一定道理的。 - vsync

Answer 2

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

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

详见 在jQuery Cycle幻灯片放映上方显示div的z-index

- John Yin

Answer 3

我知道这是一个旧的帖子...但想把它放在这里...我在我的网站中使用了presentationcycle并遇到了类似的问题，尝试了这里建议的解决方案...我在自己的css文件中多次更改了Z-index...但最终发现问题出在循环本身的css上...在其中更改z-index有助于解决我的问题。

- anoop4real

Answer 4

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

- LikeMaBell