Tabs - z-index

On a page I am developing, I intend to include AW.UI.Tabs and a couple of Grids. I am also using another third party tool on the page; which I unfortunately cannot edit.

My problem is that when the other tool on my page is used, it appears behind the Tabs. It appears in front of the Grids correctly, but behind the Tabs.

I'm not very familiar with use of z-index, but I understand I can change how the objects are layered.

I have tried to move the other tool up to a higher level, but could not get this to work without going into its source code, which isn't an option. Instead, I have tried to lower the Tabs:

var oTabs = new AW.UI.Tabs;
        oTabs.setItemText(['Tab header A', 'Tab header B']);
        oTabs.setItemCount(2);
        oTabs.setSelectedItems([0]);
        oTabs.setStyle('z-index', '-1'); // <<<	
        
        oTabs.onSelectedItemsChanging = function(iTabIndex)
        {
            alert('here');
            ShowTabPage(oTabs, iTabIndex);
        }

This works, in one respect; My Tabs now appear underneath the other tool. But, clicking on my Tabs no longer works. I click on the Tabs, and nothing happens.

If I use the tab key to move through the page elements until I get to the Tabs then use the cursor keys to select left and right, the Tabs do indeed function, but clicking on them with the mouse does not work. Setting positive values for z-index doesn't stop clicking from working - positive values don't break it; It only stops working if the value I set is negative.

As far as I know, negative values for z-index are valid css. Am I doing something wrong, or does the Control not support this?

The tabs control has z-index 1000 (in order to overlap the next object). Try setting the z-index to 0 or 1 instead of -1 maybe that will be enough to make your other tool working.

If not, you can try playing with the inner list div inside the tabs - it also has z-index 1000 and is marked with aw-list-box class, i.e.

.aw-ui-tabs {
z-index: 0;
}

.aw-ui-tabs .aw-list-box {
z-index: 0;
}

Unfortunately, zero wasn't enough to get the Tabs completely below the other third party tool, but I've managed a nasty looking hack to overwrite a line of code in that tool in order to raise its z-index.

Thanks for the help.