I am working with a table component that has sticky headers and dropdowns, ellipsis menus, and other complex components within the table body rows. Each row of the table contains nested table body rows, and the parent rows stick to their child rows. However, the dropdowns and ellipsis menus get hidden behind the next sticky row due to z-index limitations. The only solution is to render these menus outside of the table with a higher z-index.
For easier understanding, let's consider the render method:
return <div id='parent'>
<input />
<span id='child'>{value}</span>
</div>;
I aim to render child outside of parent in DOM Hierarchy as follows:
...
<body>
<div id='parent'> <input /> </div>
<div id='child'></div>
<body>
...