Sponsored Ad

Tuesday, April 20, 2010

How to Control Display Order of Controls Through CSS | z-index

 

This is a post to discuss the display order of controls using css setting. z-index is a property by which display order can be controlled.

Lets have a example of image and a heading. image added with img tag of html and a h1 heading is added as well.

for the image tag we given z-index:-1 property. while for h1 tag nothing is specified. by default z-index contains 0 value.

z-index property can be applied on every control which support CSS settings. while some of the control do not support z-index property at all. in place of z-index there can be any other property.

 

<html>
<head>
<style type="text/css">
img.x { position:absolute; left:0px; top:0px; z-index:-1 }
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="Venue Map.gif" width="100" height="180">
<p>image tag have z-index –1 so h1 will come top of image.</p>
</body>
</html>

No comments:

Post a Comment

Sponsored Ad

Development Updates