2

I have a complex UI in which I need to re-arrange some of the elements not be overlapped by some others.

Concretely, and simplifying a lot, I have a main-content div and a vertical-menu on the right. The thing is that these two elements are siblings and main-content contains a popover that I want to be above vertical-menu. This JSFiddle shows the problem.

Constraints are: I cannot change the position attribute of these elements (it would hugely break my UI) and with that, I wouldn't be able to use z-index since it only works with positioned elements. I cannot also modify the elements hierarchy.

I have also read that using transform and opacity helps "reset" the stacking contexts, but it seems not to be working. Is this at all possible?

tteguayco
  • 766
  • 1
  • 6
  • 16
  • See this post, it may help: https://stackoverflow.com/q/57370623/14264568 – Tiago Rangel Oct 06 '21 at 10:13
  • I don't think this is possible while abiding by the constraints you have specified – DBS Oct 06 '21 at 10:19
  • Did you try `* { position:relative }` and increase the z-index? – Posandu Oct 06 '21 at 10:23
  • Yes, it's working on the JSFiddle but not on my app. Unfortunately it's a complex UI, difficult to reduce it to a simple fiddle to state the problem. That is why I set not changing position attributes as constraint. – tteguayco Oct 06 '21 at 10:28
  • What causes the popover to show? – A Haworth Oct 06 '21 at 11:05
  • check tt the end of the duplicate, you will find ideas with 3D transform – Temani Afif Oct 06 '21 at 11:11
  • Forgot to mention my app is made with React. I found that Portals do exist: https://reactjs.org/docs/portals.html With this, I can put the popover as a child of the body in the DOM, so that it now has its own stacking context. – tteguayco Oct 06 '21 at 14:15

0 Answers0