0

I have an element E which works as a pop-up windows. When I open this windows I want it to be displayed on top of everything else. E.g. if there are multiple pop-up windows open, my particular element E should be on top of everything else.

I'm familiar with the z-index but this approach sounds very buggy. If someone else uses a higher z-index my pop up windows will vanish in the background.

How can I prevent this from happening? Is there an attribute which declares an element to be always on top?

Beru
  • 657
  • 1
  • 6
  • 21
  • If you do not want to use `z-index` then declare your element as the last element with CSS positioning to show it above other elements. It is not necessary that a higher z-index will hide you pop-up windows always. A higher z-index works only if your pop-up window and other elements are in the same [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). – Ritesh Jagga Jul 13 '21 at 09:05
  • If there was an "X property: always display on top", people would be asking for a "show slightly higher than X". – DBS Jul 13 '21 at 09:06
  • @DBS That sounds very true. – Beru Jul 13 '21 at 09:07
  • *Is there an attribute which declares an element to be always on top?* --> it's z-index with a *very* big value. As simple as that – Temani Afif Jul 13 '21 at 09:09
  • Do you have control over the other pop ups? Is it you that display them? – mahan Jul 13 '21 at 09:19
  • There is nothing buggy with z-index. It's working perfectly in every way intended. A way to have something be on top of something else is to simply give it a higher z-index than every other element. There's no hocus pocus to it. It's literally just that. No bugs. Pretty much every pop-up utlizes this. – Martin Jul 13 '21 at 09:45
  • If you do encounter problems with z-index, it's because your logic is wrong (which would be easier to tell if you incorporated some code in your question). For instance, a parent can never be on top of its child. The child will have a z-index relative to its parent. – Martin Jul 13 '21 at 09:49
  • @Martin Of course `z-index` isn't buggy. However, the solution may lead to bugs/unwanted behavior which will be hard to debug. I was just curious if there's another way of achieving the same solution. But it seems like that `z-index` is the appropriate way. – Beru Jul 13 '21 at 12:14
  • @mahan I have control of my Element `E`. The other pop-ups are loaded from a variety of scripts. Hence, I can't control them. – Beru Jul 13 '21 at 12:27
  • Find the hightest z-index https://stackoverflow.com/questions/5680770/how-to-find-the-highest-z-index-using-jquery Pop ups normally direct descendents of body. – mahan Jul 13 '21 at 12:58

0 Answers0