Question

I have used three divs. header, wrapper and footer respectively. Header position is fixed. Wrapper consists of few components, few are jqueryUI tabs. Now when I scroll down the page the wrapper along with all the contents start hiding as the position of header is fixed, strange is the UI tabs doesn’t get hidden, instead they overlap and causing the design to fail, i tried adjusting the CSS for UI tabs, no use. I want the tabs also to go below the header, if this is possible if so how?

Answer 1

Go into your page where the tabs are displayed, open up your view source and look at the z-index of the tabs. Add this to your header’s css class:

.headerClass{
position:relative;
z-index: [insert a value higher than tabs];
}