CODEWITHSUNDEEP
javascriptcssz-index
Allenph
Allenph

Reputation: 2015

Relative positioning and z-index?

Here's the code:

$(".image").hover(
function() {
    $(this).animate({ height: "100", width: "100"}, "fast");
    $("image-two").css("z-index", "-1");
}, function() {
    $(this).animate({ height: "50", width: "50"}, "fast");
    $("image").css("z-index", "0");
    }
);

$(".image-two").hover(
    function() {
        $(this).animate({ height: "100", width: "100"}, "fast");
        $("image").css("z-index", "-1");
    }, function() {
        $(this).animate({ height: "50", width: "50"}, "fast");
        $("image").css("z-index", "0");
        }
);

<div class="main">
<img src="../images/templateone.png" class="image" alt=""/>
<img src="../images/templatetwo.png" class="image-two" alt=""/>
<script src="../javascript/gallery.js"></script>
</div>

.image {
position: relative;
width: 50px;
height: 50px;   
}

.image-two {
position: relative;
width: 50px;
height: 50px;
}

The point here is to make one box expand OVER the other without them moving each other. I know z-index requires positioning, but position: relative; doesn't seem to do it for me. Z-index has always been a little but of grey area for me, and I'm trying to figure it out. Do I have to use absolute positioning or am I just doing something wrong? Thanks in advance.

Upvotes: 0

Views: 119

Answers (2)

bitfiddler
bitfiddler

Reputation: 2115

Yes use absolute positioning and animate the left of image-two. The left of image defaults to 0 and so do the tops of both.

.image {
    position: absolute;
    width: 50px;
    height: 50px;

}
.image-two {
   position: absolute;
   left: 55px;
   width: 50px;
   height: 50px;
}


$(".image-two").hover(
    function() {
        $(this).animate({ height: "100", width: "100", left:"5"}, "fast");
        $("image").css("z-index", "-1");
    }, function() {
        $(this).animate({ height: "50", width: "50", left: "55"}, "fast");
        $("image").css("z-index", "0");
        }
);

Upvotes: 0

Raza
Raza

Reputation: 1105

You have to use position:absolute in this case, with appropriate z-index check http://jsfiddle.net/tbHDt/1/

Upvotes: 1

Related Questions