Can I have a position absolute over a position sticky?
I am trying to get an absolute positioned element to stick over a sticky row and sticky first column of a table. It doesn't seem to work.
Here is a codepen as the code is a bit big to post here: https://codepen.io/asangelov/pen/QWxEoYQ
You can see the corners of the tooltip when you hover over the world icon are under the stickied first column and under the next cell of the stickied row.
I've tried adding a z-index and looking up issues with z-index and position: absolute vs position: sticky online but found nothing other than the fact that there must be a position which I already have.
3 Replies
you can try this. if the table is hovered, every th that is not hovered, gets a z-index of -1
that's an interesting idea but the headers become "transparent" once you scroll
using
z-index: 0 is a bit better although the left-top cell is still a bit buggy, I will play around and see
I managed to change some z-indices around and got as close as possible to the desired result, now tooltips are only covered by the top-left cell