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: 
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...
Google Chrome to 84.0.4147.135 (Official Build) (64-bit) 2020-02-22.

Since my last update, CSS element z-index is broken in Chrome.

Chrome added "z-index: 1;" to the BODY element.

It now wrongly displays all z-index: ?; values in the BODY child elements.

Setting the position, z-index of BODY does not solve the problem.
Changing z-index values of child elements that were already correct does not help.

I hope this issue will be fixed, it is only broken since I updated Chrome.

Chrome 84.0.4147.135 bug on [www.eatme.pro/music](http://www.eatme.pro/music) - screen smaller than 500 px - push play - appearing bottom bar #lblBottomBarLink with z-index 5 is displayed under menu with z-index 2

(see image)

[image eatme.pro/music in Chrome 84.0.4147.135 with z-index 5 under z-index 2](https://i.stack.imgur.com/HIAD8.jpg)