Floating with Positions


I have an overlapping tabbed layout and the only way that I’ve been able to get it working is by floating the tabs and then using position relative on the tabs (because I need z-index). This works great in IE9, but it breaks when people run the browser in compatibility view. It also works fine in FF.

I don’t want to use absolute positioning. My tabs are dynamically loaded and I can’t see any way to use absolute position on them.

Someone told me that I shouldn’t use float and position relative on the same items. I’m wondering if that’s true, and if so why? I don’t see anything on W3C about it.

I’ve also been looking around and I’ve found a lot of articles on floats vs. positioning, but nothing on using them both on the same item.