Z-Index
See original GitHub issueIs your feature request related to a problem? Please describe. I tried to render the arrow behind a component by doing something like this:
<XArrow passProps={{ style: { zIndex: -1 } }} ... />
But it doesn’t work. Is there any way to do it at the moment?
Describe the solution you’d like There should be a zIndex prop that would be passed to the svg components of the arrow. Something like this:
<XArrow zIndex={-1} ... />
Describe alternatives you’ve considered
- I tried changing the order they were rendered, but I need to create the
start
andend
refs dynamically, therefore, I need to render the components before I render the connection between them (I’m using use-dynamic-refs for this). - I also tried setting
opacity
to0.99
to see if the problem was with a Stacking Context, but it didn’t work.
Additional context I want a way for the connection to be displayed behind the little gray circles.
I’m using this library for a university project, so I really need a solution for this, even if it is just a hacky workaround.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
z-index - CSS: Cascading Style Sheets - MDN Web Docs
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger ...
Read more >CSS z-index property - W3Schools
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element...
Read more >z-index - CSS-Tricks
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is...
Read more >Z-index and stacking contexts - web.dev
The z-index property explicitly sets a layer order for HTML based on the 3D space of the browser—the Z axis. This is the...
Read more >Understanding Z-Index in CSS - Ahmad Shadeed
The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@pmorim Try using
divContainerStyle={{ zIndex: -1}}
added in dev branch