alternative to z-index
Wednesday, March 18th, 2009If you find it impossible to get certain items to lay on top of each other in a predictable way, you can always fall back on creating the element further down in your code and absolutely position it wherever you please. There are a few tricks to use in different design layouts, which I will discuss.
if you are using this in a centered div then automatically you are probably thinking this will not work because you must specify top or bottom and left or right parameters. Wrong! Just absolutely position the element, do not specify top; right; bottom; or left parameters, and instead, specify margins! This way the element will move along with your centered div layout as the window is resized or opened in resolutions different from the developer’s machine.
If you have a left justified web site that does not move when the window is resized then forget the margins and only specify that the element is absolutely positioned. That should bring it right to the top.
If many absolutely positioned elements are on top of each other and you want them arranged in a different order, z-index isn’t always the most reliable (especially in ie6), so all you have to do is move the code for the element further down in the page than the element you want behind it, absolutely position them and set the margins, BAM! Problem solved!
-
-
.element1 {
-
position:absolute;
-
margin:0px 0px 0px 0px;
-
width:100px; /*because divs are automatically 100% width*/
-
}
-
.element2 {
-
position:absolute;
-
margin:40px 0px 0px 0px;
-
width:100px; /*because divs are automatically 100% width*/
-
}
-
.element3 {
-
position:absolute;
-
margin:0px 40px 0px 0px;
-
width:100px; /*because divs are automatically 100% width*/
-
}
-
.element4 {
-
position:absolute;
-
margin:40px 40px 0px 0px;
-
width:100px; /*because divs are automatically 100% width*/
-
}
-
-
-
<div class="element1">Div 1</div>
-
<div class="element2">Div 2</div>
-
<div class="element3">Div 3</div>
-
<div class="element4">Div 4</div>
-
Hopefully this will help you if you are pulling your hair out on cross-browser issues. Enjoy yourself!
