Google Chrome not respecting z-index

Question

As per the title, it seems only Chrome isn't playign along. Note that form fields cannot be clicked on which are on the left portion of the screen. This only occurs on some pages (such as the Contact page). It appears that the #left_outer div is overlaying the content. When I edit the css via Firebug or Chrome's dev toools, it works, when I edit the actual css and refresh, it does not.

Any ideas?

LINK:

Thanks!

Answer 1

I know this is now resolved but posted solution didn't work for me. Here is what resolved my problem:

<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function clientShown(ctl, args) {
        ctl._completionListElement.style.zIndex = 99999;
    }
</script> 

Answer 2

I had a weird issue with zIndex on Chrome and I kept fiddling with the position attribute to see if anything worked. But, it didn't. Turns out, in my case, the issue was with the transform attribute. So, if you have a transform attribute in place, disable it and it should be fine. Other browsers work fine with stuff like that, but Chrome seems to play it differently.

Hope this helped you.

Answer 3

Markt's answer (see first answer) is great and this is the "by definition" of the z-index property.
Chrome's specific issue are usually related to the overflow property from the top container bottom. So, for the following:

<div class="first-container">...</div>
<div class="second-container">
    <div ...>
         <div class="fixed-div> some text</div>
    <... /div>
</div>

And styles:

.first-container {
    position:relative;
    z-index: 100;
    width: 100%;
    height: 10%;
}

.second-container {
    position:relative;
    z-index: 1000;
    width: 100%;
    height: 90%;
    overflow: auto;
}

.fixed-div {
    position: fixed;
    z-index: 10000;
    height: 110%;
}

the following actually happens (Chrome only, firefox works as expected)
The 'fixed-div' is behind the 'first-container', even though both 'fixed-div' and its container's ('second-container') z-index value is greater than 'first-container'.

The reason for this is Chrome always enforce boundaries within a container that enforces overflow even though one of its successors might have a fixed position.
I guess you can find a twisted logic for that... I can't - since the only reason for using fixed position is to enable 'on-top-of-everything' behavior.
So bug it is...

Answer 4

Usually when you have set the z-index property, but things aren't working as you might expect, it is related to the position attribute.

In order for z-index to work properly, the element needs to be "positioned". This means that it must have the position attribute set to one of absolute, relative, or fixed.

Note that your element will also be positioned relative to the first ancestor that is positioned if you use position: absolute and top, left, right, bottom, etc.

Answer 5

Without a link to look at, it's a bit tough to see what the problem might be.

Do you have a z-index: -1; anywhere (a negative number is the key here, doesn't matter the number)? I have found in the past this renders the container void from being interacted with.

Good luck!