Search code examples
csswordpressz-index

Z-index overlapping issue in Chrome

On my website i have set z-index: 1000 for an image when the hover state is active, which works great in firefox, but it doesn't in chrome.

Please check the gifs: the enlarged image shows up behind the text, even if the text z-index is lower then 1000. This is wrong and this is what i am trying to archive: showing the image on hover above the text

My website is https://pixelbeast.hu

What i am doing wrong?

Solution

  • You need add position: relative; style rule to your image to make z-index: 1000; works.

    z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).