Menu
I have a calendar/table that when you hover over each day we have a small popup that is absolutely position below each cell.
To make this work I have added a <div style="relative" /> inside each cell. Works fine in FF although when you hover over it in IE the z-index is being ignored.
I have tried all of the hacks I can think of to get it to work in IE 7 + 8.
629
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
And it will, as it is in same stacking context. However, as soon as you give a z-index value to the div. bottom , it creates a new stacking context which confines all of its child elements to a particular place in the stacking order. This causes it not to appear in front of the tabs irrespective of the z-index of tabs.
Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
No need for all the individual z-indexes on the .wrapper div's inside the td elements (they can all be set to 1 I believe), and set these properties:
/* add these two to your selector */
#calendar tbody td {
position: relative;
z-index: 1;
}
/* create this new selector */
#calendar tbody td:hover {
z-index: 2;
}
Using firebug and IE's developer tools, it appeared to me that it was working in Firefox and IE7 and 8.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
