How to Fix the Z-Index Opacity in IE
The z-index of an element defines how high or low it is in a stack of layer items. Coupled with opacity, this gives you the option to stack elements and make the uppermost elements semi-transparent. IE 7 or earlier users encountered errors with elements using the z-index attribute were not layered properly: the other layer that was supposed to be on top was appearing on the bottom. This happened because IE was starting the z-index "0," when the z-index should have defaulted to "auto." This error was fixed in IE 8, which displays the layers properly.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
Set a position for your element. The z-index only works with positioned elements. There are five options for positioned elements: "Static" positions the elements in the same order that they appear within your document; "Absolute" is used to set the position absolutely from the corner of the page; "Fixed" is similar, except that it moves with the browser window; "Relative" is used for moving the element relative to where it would be positioned if the position were set to "Static"; finally, "Inherit" uses the position style for the parent element.
-
2
Define the element you want on the bottom with the lowest z-index, such as "-1" or "001" or even "1000." The number isn't important, except in how it relates to the other numbers; the next element up in the stack would need to be "2," "002" or "2000." For instance, to position an image absolutely on the corner of your page, it would look like this:
<img src="http://www.yourdomain.com/yourimage.jpg" style="position: absolute; top: 0; left: 0; z-index: 01;" />
-
3
Use the "filter" property to make the top element semi-transparent. Most browsers use "opacity" to make an element semi-transparent, but this does not work for Internet Explorer up through IE 8. To make an element transparent in CSS, you also need to add the attribute "filter:alpha(opacity=100)." For instance, if you want a DIV element to be 50 percent transparent over an image, add both "opacity" and "filter" like this:
<img src="http://www.yourdomain.com/yourimage.jpg" style="position: absolute; top: 0; left: 0; z-index: 01;" />
<div style="opacity: 0.5; filter:alpha(opacity=50); position: absolute; top: 0; left: 0; z-index: 02;">Content</div> -
4
Save your file and test it in Internet Explorer. It's best to test your page in multiple browsers, such as Firefox, Chrome and Safari.
-
1
Tips & Warnings
"Static" is the default position for an element if a position is not defined.
The "Inherit" position was not supported in Internet Explorer until IE 8.
