I have one div which has an image in. The div is the same size as the image.

I have another div I would like place on top of that div and the image. I would like it positioned in the bottom right hand corner.

Here is the CSS of the div that has the image in:

.image {
    float:right;
    border:#999999 1px solid;
    width:200px;
    height:200px;
    }

Here is the CSS of the div I would like place on top of the image in the above div:

.image-click {
    background-color:#003366;
    height:25px;
    width:25px;
    position: relative;
    left: 175px;
    top: 175px;
    }

It works ok when the first div is empty but once there is an image in the div the image is pushed out of its div (image) div gets knocked out the way.

Thanks.

How about making the image a background image in the initial div?

I did think of that. But I want to use the div multiple times with a different image in. Not sure of a good way to do that apart from creating loads of styles with different background images.

In this case you're going to need absolute positioning for the div you want to place ABOVE the other. Set the 1st div (the bottom one) to position: relative, set the one above it to position:absolute and give it a z-index of 50 or something (you want a higher number, not "2").

Thank you.

It worked with or without the z-index.

Originally Posted by LadynRed

In this case you're going to need absolute positioning for the div you want to place ABOVE the other. Set the 1st div (the bottom one) to position: relative, set the one above it to position:absolute and give it a z-index of 50 or something (you want a higher number, not "2").

Sorry to bother you again about this as the other person got it working but I just can't?

My HTML looks like this:

<div id='mainContentBackground'>
<img src="MainContentBackground.gif" height="100%" width="100%"/>
<div id='mainContent'>
<br><br><br><br><br>
</div>
</div>

And my css looks like this:

#mainContentBackground{
position:relative;
height:82%;
width:83%;
float:left;
}

#mainContent{
margin-top:20px;
margin-left:6px;
margin-right:6px;
margin-bottom:6px;

position:absolute;
z-index:50;

height;
width:99%;
background-color:#e0ecff;
}

But the mainContent div is still appearing underneath the img?????

If you could help in any way, It would be VERY VERY APPRICIATED!!!

Thank you so much in advance
IrishWMT

Why aren't you putting the image in as a BACKGROUND on the div ?? That is what you need to do, not put the image INSIDE the div.