JQuery UI hiding CSS Menus in IE
We have some nice CSS flyout menus on a site I’m working on now. Unfortunately in IE7 and IE8, JQuery UI’s tabs are being displayed above the flyout menus, making it look like flyouts are appearing underneath the tabs – not what we want.
After much digging through code, firebugging, etc., I figured out that the problem has to do with position:relative and position:absolute.
It would appear that position:relative will trump position:absolute no matter what the z-index. Very confusing and frustrating.
The fix I ended up using was to add a inline style of position:static on the tags that were being made relative. This fixed it and I didn’t have to edit the JQueryUI generated CSS.