How to use z-indexing in CSS
You may find when using CSS positioning that, on occasion, you may end up with layers that overlap. sometime this can be a required element to the design of your layout. But what if you want the first or second layer to be top, not the last one you've positioned? This is when the z-index property comes into play.
Z-index? What?
Think of each positioned layer of you design as pieces of paper. You can lay them one on top of the other in whatever order you like... using the z-index of course. The higher the z-index the closer to the top of the "paper pile" it is going to be. you can even use negative numbers to get the positioned element right down to the bottom. Cool huh?
Umm... examples please
Right, quite simply you will need to have some css positioned elements. These will HAVE to have the position attribute set. The z-index will work with either relative or absolute positioned elements. For example:
#container {
position:absolute;
width:100px;
height:100px;
z-index:-1;
}
This container will position itelf below the previous element. Use a positive number and the element will be above.
Easy Peasy!
Please rate this article
Click the stars below to give this article a mark out of 10Related Articles
Creating a conditional CSS with PHP9 Mar 2011 | Posted by: Paul Whittington
Creating a conditional CSS file, mainly to avoid the issues of IE6 but also to allow easier modifications to mobile device stylesheets.
Post your comments...
We would really appreciate any comments or additions that you have. Include a link in your comment and if we think your comment is appropriate we will publish it. If found this article in any way useful we would really appreciate you bookmarking the page with any of the social bookmarking links provided.I needed to calculate an age on a given date recently and it takes more thought than meets the eye... 86% rating, 0 comments Sorting PHP associative arrays 29 Sep 2011 | Posted by: Paul Whittington
Do you need to sort a php associative array by a value in one of the keys, heres a function to just that 90% rating, 0 comments php prepared (parameterized) statements into arrays 7 Sep 2011 | Posted by: Paul Whittington
A couple of functions to get data from a database into an associative array using prepared or parametized queries, that therefore overcome the danger of sql injection. 95% rating, 0 comments Solving 'This page contains both secure and nonsecure items' errors 21 Jul 2011 | Posted by: Paul Whittington
Having trouble getting rid of 'this page contains both secure and nonsecure items' errors? 97% rating, 0 comments
