Cross Slide z-index issue
Question
I'm using cross slide script.
The problem is I can't move the div to the background: slideshow overlapping all other divs. Tried to change z-index: Set z-index 0 to background div, and z-index:2 to all other divs. Still no success. Is there anyway to apply slideshow to the background div?
My css strcture looks like that
<body>
<div id="bg">
"all stuff goes here"
</div
</body>
And css for #bg
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
4 answers
solution1
1 ACCPTED 2011-10-19 06:00:18
Set css to:
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
#test {
position: relative;
background-color: red;
z-index:5;
width: 120px;
margin-top:5px;
}
and html to:
<body>
<div id="bg"></div>
<div id="test">"all stuff goes here"</div>
</body>
Also see my jsfiddle .
solution2
0 2011-10-19 05:39:28
使用z-index: -1将其带到背景z-index: -1
solution3
0 2011-10-19 05:42:53
instead of making z-index:0 or -1 to your "bg" id, make all other content z-index to 99 or more than that. so your "bg" will be back of your slides.
solution4
0 2011-10-19 05:50:32
Do you observe the (complex) rules for stacking contexts, positioning, and z-index correctly?
https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.