'Make the dark mode button above all elements used DarkMode.js

I want to make the dark mode button above all the items on the website.I used DarkMode.js for the same.The button is hiding behind an image.How make its priority the topmost?

javascripthtmlcssreactjsdarkmode


Solution 1:[1]

z-index theoretically solves that

Solution 2:[2]

It would be better if you also questioned the code you wrote. Anyway, I think your problem can be solved with the following method. Suppose your button class is "myBtn". Then in your css:

.myBtn {
   z-index: 10;   /* or more than 10 if 10 does not work */
}

For another way you can use css-in-js like this:

<button style={{zInex: 10}}></button>

Solution 3:[3]

As the others have said, .myBtn { z-index: 10; } or any other high number.

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

Solution 4:[4]

Just to clear up things (FOR THIS REPOSITORY) as everyone mentioned z-index, it will solve your problems. If you check up on your web-page, you actually get <button> with class .darkmode-toggle, in your style.css or in <head> within <style> </style> you just need following:

  .darkmode-toggle{
    z-index:10;
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dogisdev
Solution 2 qafoori
Solution 3 FoxPaw
Solution 4 helloworld

Related Questions