CODEWITHSUNDEEP
cssgoogle-chromewebkitpositionz-index
Alexandre Bourlier
Alexandre Bourlier

Reputation: 4118

z-index not working as expected on Google Chrome & Safari. Ok on Firefox & Opera

I have just finished the reading this great post, but it did not help me.

This is the website I am building: http://82.230.210.84. If you rezise Google Chrome down to trigger the responsive design, and then scroll down, you will see that the menu passes below the images, instead of remaining over them, as it does in Firefox.

In the code, all z-index properties come with a position property set to relative/absolute/fixed, and obviously the higher value (50) is set to the menu.

Any suggestion about why the menu does not stay on top on the images on WebKit browsers? Any potentiel fix/workaround is most welcome!

Upvotes: 0

Views: 1413

Answers (1)

Nikita 웃
Nikita 웃

Reputation: 2060

I was able to fix it by adding -1 z-index.

Like this

.formation_domains a.formation_domain > div {
  position: relative;
  width: 200px;
  height: 125px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

Hope this helps.

Upvotes: 1

Related Questions