Layering Photos

Hi,

I am trying to layer or superimpose on photo in the corner of another, ideally with the first image providing a margin around the second image.

Here is the code from my stylesheet:

div.banner
{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:170;
z-index:0;
}
div.header
{
display:block;
position:absolute;
top:0;
left:85%;
width:100;
height:150;
z-index:1;
}


And my code on my page:

echo '<div width="100%" height="170"><div class="banner"><img src="thumbs/BlogHeader.jpg" width="100%" height="170"></div><div class="header><img src="thumbs/' . $row['header'] . '" width="100" height="100"/></div></div>';


And currently neither are showing.

So not sure what I am doing wrong?

Position:absolute will start from the position of the nearest enclosing element that has position:absolute or position:relative, and in the absence of these it'll position from the viewport. So that might be why you can't see them.

I'd do it like this:

<div width="100%" height="170">
<div class="banner">
<img src="thumbs/BlogHeader.jpg" width="100%" height="170">
<img class="header" src="thumbs/' . $row['header'] . '" width="100" height="100"/>
</div>
</div>

with:

.banner{position:relative}
.header{position:absolute;top:0;left:85%;}


Then .banner is positioned normally rather than absolutely and just contains the blogHeader image, and .header is positioned absolutely with respect to .banner, which I think is what you want - adjust the top and left settings on .header to suit.

Thank you.

I tried it but I am getting no BlogHeader.jpg coming up and my $row['header'] is position to the left of the div?

I tried making it div.banner, I have also tried margin-left instead of margin but that didn't work either.

Are you sure the path to your image is correct?

Can you give a link to your page?

OK, so I switched to testing in firefox, and you are absolutely right this works.

But I get nothing in IE. !!! typical.

My finished code is:
Stylesheet

.banner{position:relative; z-index:1;}
.header{position:absolute;top:10px;left:80%;z-index:2;}


Page:

<div width="100%" height="170">
<div class="banner">
<img src="/thumbs/BlogHeader.jpg" width="100%" height="170">
<img class="header" src="/thumbs/' . $row['header'] . '" width="150" height="150"/></div></div>


All I get in IE is the compressed image box with an x in it.

Any ideas on the fix?

Hello Jenny Dithe,
The dreaded red X is usually a path issue. That's why SB65 is asking for a link to the page so we can see the image.

For this <img src="/thumbs/BlogHeader.jpg you can try either removing the first slash "thumbs/ or giving the full path with http://

Thank you for all your help.

I tidied up the page generally - relating to a completely different section - and it suddenly started working in IE!

So it is now solved.