hover z-index and positioning
I broke my sick wikilink hover [1] recently in a refactor, today I did some
diving in to figure out what happened.
Before # [2]
As you can see in the screenshot below, the link is in a list of links, and
when the hover image pops up it sits behind all of the other text. The z-index
of the list-item is supposed to be raised above the others on hover.
[3]
Manually setting z-index to 20 in the inspector I noticed this message from
devtools, “The position: static property prevents z-index from having an
effect. Try setting position to something other than static.”, looking back at
some of my refactoring I had relative in an old template and it was lost.
[4]
After # [5]
After properly setting position to relative on the list-item, the hover image
is raised above the others.
[6]
References:
[1]: /sick-wikilink-hover/
[2]: #before
[3]: https://dropper.waylonwalker.com/api/file/b3158b49-5c0f-4e52-b3e3-47ba67f5c801.webp
[4]: https://dropper.waylonwalker.com/api/file/1c7fb24c-b77d...