Google Chrome not respecting z-index

css google-chrome z-index
vulgarbulgar picture vulgarbulgar · Jun 16, 2011 · Viewed 34.3k times · Source

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

markt picture markt · Jun 16, 2011

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.

Related questions

Strange z-index behavior with scrollbars under Chrome

Using z-index CSS property on 'fixed' positioned elements gives me a strange behavior under Chrome. When Firefox and Opera browsers give me the awaited result, Chrome does not seem to respect the z-index property, displaying the scrollbar above the red …

Read More
Google Chrome, Flash and z-index wrong behaviour

Google Chrome is displaying the z-index of a Flash video incorrectly. Take a look at http://maxusglobal.com/ in Firefox or Internet Explorer. Now take a look at it in Chrome. The big video at the top of the page …

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More