将 div 放置在 jQuery 图像滑块上
我试图在 jQuery Tools Scrollable 图片库上放置一个 div 元素。我已经以正确的方式放置了所有内容,但是即使我设置了 z-index: 2,div 也不会出现在 jQuery 对象的顶部。这是我的代码:
div#wrapperContainer{
display: table;
overflow: hidden;
margin: -5px auto;
}
//this is the div i'm trying to put on top of the jQuery Tool
div#wrapper {
display: table-cell;
vertical-align: middle;
z-index: 2;
width: 1024px;
height: 192px;
background-color: #525252;
-moz-box-shadow: 0px -10px 50px #000;
-webkit-box-shadow: 0px -10px 50px #000;
box-shadow: 0px -10px 50px #000;
}
//this is the CSS for the jQuery Tool
.scrollable {
position: relative;
overflow: hidden;
width: 940px;
height: 528px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
.items {
width: 20000em;
clear: both;
position: absolute;
}
.items div{
float: left;
width: 940px;
height: 528px;
}
I'm trying to place a div element over the a jQuery Tools Scrollable image gallery. I've got everything placed in the right way, however the div doesn't appear on top of the jQuery object even if I set z-index: 2. Here's my code:
div#wrapperContainer{
display: table;
overflow: hidden;
margin: -5px auto;
}
//this is the div i'm trying to put on top of the jQuery Tool
div#wrapper {
display: table-cell;
vertical-align: middle;
z-index: 2;
width: 1024px;
height: 192px;
background-color: #525252;
-moz-box-shadow: 0px -10px 50px #000;
-webkit-box-shadow: 0px -10px 50px #000;
box-shadow: 0px -10px 50px #000;
}
//this is the CSS for the jQuery Tool
.scrollable {
position: relative;
overflow: hidden;
width: 940px;
height: 528px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
.items {
width: 20000em;
clear: both;
position: absolute;
}
.items div{
float: left;
width: 940px;
height: 528px;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
你能绝对定位包装div吗?
如果是这样,那就应该解决它以及适当的 z 索引。
请参阅此处的定位示例。
Can you position the wrapper div absolutely?
If so, that should take care of it, along with a proper z-index.
See the positioning example here.
看一下
jQuery.toggle()
。Take a look at
jQuery.toggle()
.