Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for CSS property z-index not working
Sara Ounissi
Sara Ounissi

Posted on • Originally published atthetrendycoder.com

     

CSS property z-index not working

It is never easy for me to use z-index especially when you are adding code to an existing project, and you don’t know the whole structure. I was stuck with that for a while, adding z-index on every level of div, but nothing was working.

Thanks toStackOverflow, I was able to understand the problem:
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed;). There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
SourceStackoverflow

However, there is something else you need to know: when an element has an opacity value less than 1, even with a z-index of a million it won’t work. So if your z-index is not working, check the opacity of your element. You can read a detailed article about that following thislink.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Frontend developer 👩‍💻Tech blogger 💻Shares Experience, Tutorials, Resources and more… 🤓Encourage girls to work in tech 👑Scared of Backend and hates Java 😵Mother of a 2yo girl 👧
  • Location
    Lyon, France
  • Education
    Computer science Engineer
  • Work
    Frontend developer
  • Joined

More fromSara Ounissi

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp