CODEWITHSUNDEEP
htmlcss
daisy
daisy

Reputation: 23511

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.

enter image description here

I use diferent z-index to make the left-most image shows at top of stack , but it doesn't work here. Is it wrong to use margin-left with negative value ?

<html>
    <head>
        <title>Demo</title>
        <style>
            li {
                float: left;
                display: inline;
                margin-left: -20px;
            }
            .A {
                z-index: 10;
            }
            .B {
                z-index: 9;
                margin-top: 3px;
            }
            .C {
                margin-top: 6px;
                z-index: 8;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img class="A" src='adobe.gif' /></li>
            <li><img class="B" src='adobe.gif' /></li>
            <li><img class="C" src='adobe.gif' /></li>
        </ul>
    </body>
</html>

Upvotes: 0

Views: 3145

Answers (3)

Sebastian
Sebastian

Reputation: 149

You need to add this rule:

li img {
    position: relative;
}

Or another value of position, as the definition of z-index says it only works on positioned elements.

Upvotes: 9

Terry_Brown
Terry_Brown

Reputation: 1408

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:

<div class="image_container">
  <img class="A">
  <img class="B">
  <img class="C">
</div>

and having CSS thus:

.image_container {
    position: relative;
    width: <widest image width>;
    height: <highest image height>;
}

.image_container img {
    position: absolute;
}

.image_container img.A {
   z-index: 10;
}
.image_container img.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? .

Upvotes: 0

talha2k
talha2k

Reputation: 1

JSBIN: http://jsbin.com/itepeg

Tweak your code like this:

<html>
<head>
<style type="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><img class="A" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
            <li><img class="B" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
            <li><img class="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.

Upvotes: 0

Related Questions