dcole.ath.cx Posted April 1, 2007 Share Posted April 1, 2007 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. Link to comment Share on other sites More sharing options...
falcifer Posted April 2, 2007 Share Posted April 2, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now