react-select stacking order bug, z-index, layers and stacking
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select).
Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it
I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint.
One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order.
Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see how adjacent layers are stacked.
Ultimately the z-index of the container the Dropdown was in needed to set set higher than subsequent containers (not just the Dropdown but the whole container it's it)
Google Chrome layers
This may be the best article I read about z-index and stacking. This also a good article by smashing magazine. Also good docs on mdn as usual.
- z-index is stack level (or order) of html elements on the x-axis (which is a 3rd axis besides x and y)
- there is a natural default order for stacking html elements and the z-index property can change that natural order
- by default the order in the html source determines z axis position
- if not flexbox or grid then z-index only works on an element whose position property is set to absolute, fixed or relative; (not all position choices, just those 3)
- setting z-index on elements without position property set does nothing
- if flexbox or grid then can set z-index without setting position
- z-index can be negative, positive or auto (same stack order as parent)
- negative z-index works only if the element which contains it has z-index value of auto then can set child behind it
- a stacking context is a group of elements with the same parent and and the z-index of all children is based on (relative to) the parents z-index (so also move and down the z-index together)
- setting `position: relative` will create a new stacking context for that element
- but these properties also do: opactity, will-change and transform
- and in the case of flex and grids you just set the z-index value and that will work
Comments
Post a Comment