Jump to content

images over lapping


Recommended Posts

How do I over lap images or can I?I was trying with z-index but it wasn't working out. Can someone give me some sample code that does this.
This code works for me, in Firefox 2.The images will automatically overlap if their positions overlap. The order of images is related to the order in which they occur in the page.It's fairly obvious, but the first element in the page is rendered first, and all later elements are rendered in order.So the first image in this example is drawn first, then the next image is drawn over the top. And so on... You can change the order of the z-index to get them drawn in any order you like.As far as I know, all elements automatically have a z-index of 0. So if you want something to appear below everything else, then assign it -1.If you want images layered a certain way, then working from the bottom you can assign them 1, 2, 3, 4... etc... Not sure how it works in IE...
<html><head><title>Overlap</title><style type="text/css">img#img1 {	position: absolute;	top: 50px;	left: 10px;	z-index: 2;}img#img2 {	position: absolute;	top: 25px;	left: 250px;	z-index: 1;}</style></head><body><img id="img1" src="ga1.gif" alt="image 1" /><img id="img2" src="ga2.gif" alt="image 2" /></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...