在 jQuery Cycle 幻灯片上方的 z 索引处显示 div

发布于 2024-11-25 06:56:09 字数 641 浏览 0 评论 0 原文

我在这里使用 jQuery 循环插件：http://www.mitchsflowers.dreamhosters.com/

幻灯片位于相对定位的 div 中，并且包含一个绝对定位的 div 来保存标题。该 div 位于骑行图像上方，但无论我给标题 div 提供什么 z-index，图像都会隐藏它。

有没有办法让我的标题 div 位于循环图像上方？

#homeslides {
    margin:0 auto;
    width:985px;
    height:420px;
    overflow:hidden;
    position:relative;
    padding-top:12px;
}

#homeslideCaptions {
    position:absolute;
    bottom:0;
    width:907px;
    height:57px;
    z-index:2000000;
    background:rgba(0,0,0,0.5);
}

原文

I am using the jQuery cycle plugin here: http://www.mitchsflowers.dreamhosters.com/

The slides are in a relatively positioned div and it contains an absolutely positioned div to hold captions. This div is positioned above the cycling images but no matter what z-index I give the caption div the images hide it.

Is there a way to get my caption div above the cycle images?

#homeslides {
    margin:0 auto;
    width:985px;
    height:420px;
    overflow:hidden;
    position:relative;
    padding-top:12px;
}

#homeslideCaptions {
    position:absolute;
    bottom:0;
    width:907px;
    height:57px;
    z-index:2000000;
    background:rgba(0,0,0,0.5);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海之角 2024-12-02 06:56:09

我也遇到了这个问题。

我的情况是我的顶部下拉菜单项将始终被第二周期幻灯片覆盖。我们知道通常我们将下拉菜单放在一个绝对块中。每当我们单击或悬停时，子菜单项就会出现并显示。但同时我们知道，它们不会被计入浮动布局并且高度为0。

之前，我尝试设置容器 div 的相对位置，但是一旦我这样做了，每当下拉子菜单出现时，顶部菜单下方的滑块就会被按下。显然，这不是我想要的。

经过两个小时的学习周期，我找到了这个解决方案：

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

实际上，它非常简单。

好的，让我与您分享更多相关内容。

在周期 2 js 中，我们可以发现，默认情况下，周期 2 会将主幻灯片项目 z 索引初始化为 maxZ: 100

// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    ....
    maxZ:             100,
    ...
}

所有其他幻灯片的 z 索引将以 -1 增量递增，例如 99、98 等。

您可能会想，好吧，如果我将 div z-index 设置为 101 或更大，它就会位于第 2 周期幻灯片的顶部。确实如此，但正如之前所说，我们必须将其位置设置为相对位置。

I met this problem too.

My condition is my top drop-down menu items would always be covered by cycle 2 slide. We know usually we have the drop-down menu in one absolute block. Whenever we click or hover, the child menu items would be coming out and show. But the same time, we know, they would not be counted into the floating layout and has 0 height.

Before, I tried to set a relative position to the container div's, but once I did, the slide block below the top menu would be pushed down whenever the drop-down child menu coming out. Obviously, it's not what I want.

After study cycle 2 few hours, I found this solution:

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

it's pretty simple, actually.

OK, let me share you more about this.

In cycle 2 js, we could find, as default, cycle 2 would initial the main slide item z-index as maxZ: 100

// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    ....
    maxZ:             100,
    ...
}

All other slides would has z-index by -1 increment, like 99, 98, and so on.

You might think, OK, if I set my div z-index as 101 or bigger, it would be on the top of cycle 2 slide. True, but as talked before, we have to set its position as relative.

回复收藏 0 原文