problem with css z-index in div

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

Try .full-size-image {

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

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?

Hello surreal5335,
The parent element needs to be position: relative; so your absolute positioned element stays with the parent.