...

View Full Version : problem with css z-index in div



surreal5335
02-19-2011, 05:45 AM
I cant get an image to overlap another.

Here is my html:



<div class="item-image-big" >
<a href="image.png">
<img alt="title" src="image.png" width="356" />
<img src="icon.png" class="full-size-image" alt="Expand Image" /></a>


</div>



here is my css for the two classes:



.item-image-big {

position: relative;

display: inline;

margin: 3px 0 12px;
width: 356px;

}

.full-size-image {

position: relative;
right:5px;
bottom:0px;
z-index: 1;
}


The icon.png I am trying to appear bottom right ontop of the other image.


Thanks a lot for your help

abduraooft
02-19-2011, 09:08 AM
Try
.full-size-image {

position: absolute;
right:5px;
bottom:0px;
z-index: 10;
}

surreal5335
02-19-2011, 10:27 AM
Thanks for the reply, I have found that when I make the position absolute the element wont stay in the div, it considers the entire page its playground. How can I combat this problem?

Excavator
02-19-2011, 10:39 AM
Hello surreal5335,
The parent element needs to be position: relative; so your absolute positioned element stays with the parent.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum