Jump to content

z-index doesn't work


terryds

Recommended Posts

See my code first

 <!DOCTYPE html><html><head><style> h1 {z-index:2;} img{position:absolute;left:0px;top:0px;z-index:1;}</style></head> <body><h1>This is a heading</h1><img src="w3css.gif" width="100" height="140" /><p>The z-index isn't working. The header should be in front of the image, but it isn't..</p></body></html>

Actually the code is from http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex , i edited the code...Does z-index not work if we put positive numbers ?

Link to comment
Share on other sites

An element must have position: absolute, position: relative; or position: fixed in order for z-index to have any effect. Give the <img> element a negative z-index and it will work fine for putting it behind the header. If you'd rather give the header a positive z-index you'll have to set the position property.

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...