Yep, this is about the well known IE7 z-index bug, and some people called it a stacking bug. I'm pretty sure there are a lot of posts out there will tell you how to fix the problem. And in this post I will briefly explaining my experience dealing with this bug, and my observation of this bug's behavior.
Imagine a Scenrio
Imaging you have a image gallery ( let's say a 3X3 grid ). And in each grid, besides the image, there is another hidden div (position : relative) in which the div will appear when you mouse-over the image (let's call this hidden div an overlay div). Since you want that hidden div, when it appear, to be on top of the grid, so you use the "z-index" attribute, let's say you put "z-index:99999" for the hidden div.
Image the 3X3 grid looks like the following :-
1, 2, 3
4, 5, 6
7, 8, 9
Well, it's all working great in FF and Chrome, but when you test that in IE7 ... you found out that the overlay div is above the image in the same grid, but the same overlay div now goes below the image of the right grid. On the other hand, the overlay div on the right always goes on top of the image of the left grid. And no matter what z-index you use, this behavior is still the same.
Well, let's put it in this way in order to make it more visualize :-
G = Grid
G(1).Overlay > G(1).Image
G(1).Overlay < G(2).Image
Why this behavior??
After reading some articles and do some testing, in IE7, these are the behavior
Since it re-assign z-index at run time when it sees appropriate, so it means it will overwrite whatever is in your css.
How to fix that issue?
Well, there are so many ways, and just be creative. The way I fix it is using javascript like this
There are so many solutions, and are totally depending on your needs and your creativity :)
Imagine a Scenrio
Imaging you have a image gallery ( let's say a 3X3 grid ). And in each grid, besides the image, there is another hidden div (position : relative) in which the div will appear when you mouse-over the image (let's call this hidden div an overlay div). Since you want that hidden div, when it appear, to be on top of the grid, so you use the "z-index" attribute, let's say you put "z-index:99999" for the hidden div.
Image the 3X3 grid looks like the following :-
1, 2, 3
4, 5, 6
7, 8, 9
Well, it's all working great in FF and Chrome, but when you test that in IE7 ... you found out that the overlay div is above the image in the same grid, but the same overlay div now goes below the image of the right grid. On the other hand, the overlay div on the right always goes on top of the image of the left grid. And no matter what z-index you use, this behavior is still the same.
Well, let's put it in this way in order to make it more visualize :-
G = Grid
G(1).Overlay > G(1).Image
G(1).Overlay < G(2).Image
Why this behavior??
After reading some articles and do some testing, in IE7, these are the behavior
- IE7 will reset z-index when you have declare "position" in your elements
- In IE7, children's z-index will never be higher than the parent
Since it re-assign z-index at run time when it sees appropriate, so it means it will overwrite whatever is in your css.
So in our case, the IE7 has assigned the 3X3 grid with the following z-index value
0, 1, 2
3, 4, 5
6, 7, 8
And since the Children's z-index value will never be higher than the parent, so in Grid(1), even though my overlay div has z-index:99999, it nows become irrelevant because of the z-index rearrange rule.
So the item from Grid(2) is always having a higher z-index value than all elements inside Grid(1), and item of Grid(3) is always having a higher z-index value than all element inside Grid(2) and Grid(1) and so on.
How to fix that issue?
Well, there are so many ways, and just be creative. The way I fix it is using javascript like this
- count how many Grids
- reassign z-index value starting the largest number
8, 7, 6
5, 4, 3
2, 1, 0
In this way, we just un-do what IE7 has done to our 3X3 grids.
There is another solution seems much easier, since IE treats a position like a z-index reset, so you can declare position of static on the parent element containing the z-indexed elements to have them respond to z-index correctly.
There is another solution seems much easier, since IE treats a position like a z-index reset, so you can declare position of static on the parent element containing the z-indexed elements to have them respond to z-index correctly.
There are so many solutions, and are totally depending on your needs and your creativity :)
No comments:
Post a Comment