Why Isn't Z-index Working Here
I'm trying to make images overlap , I should see all of 'Adobe' of the first image , but e was blocked by the second one , so does the third. I use diferent z-index to make the l
Solution 1:
You need to add this rule:
liimg {
position: relative;
}
Or another value of position, as the definition of z-index says it only works on positioned elements.
Solution 2:
JSBIN: http://jsbin.com/itepeg
Tweak your code like this:
<html><head><styletype="text/css">.A
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.B
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
.C
{
position:absolute;
left:80px;
top:20px;
z-index:-1;
}
</style></head><body><ul><li><imgclass="A"src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li><li><imgclass="B"src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li><li><imgclass="C"src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li></ul></body></html>JSBIN: http://jsbin.com/itepeg
Hope this helps.
Solution 3:
It would appear the combination of tags is your problem here - gradually margin-left'ing while attempting to enforce a z-index isn't ideal. Do you want them to overlap or to appear one on top of the other?
If one on top of the other, then I'd be tempted to suggest your UL/LI combo isn't necessary and just having a:
<divclass="image_container"><imgclass="A"><imgclass="B"><imgclass="C"></div>and having CSS thus:
.image_container {
position: relative;
width: <widest image width>;
height: <highest image height>;
}
.image_containerimg {
position: absolute;
}
.image_containerimg.A {
z-index: 10;
}
.image_containerimg.B {
z-index: 9;
}
etc.
I'm not 100% sure on what you mean by overlap though - it may be you want to achieve roughly what you have just not with the overlap? .
Post a Comment for "Why Isn't Z-index Working Here"