Z-indexing had a weird behavior. When I set up the pseudo element and set the z index to a negative value, it vanished. When I set the z index value of the actual element itself, it either rendered the pseud element on top of its parent element which was not what I wanted or whenever I set a negative z-index on the parent element, they both vanished. This happened because the stacking context was modified when the overall parent element became a flex item so I had to set the isolation property to isolate to reset the call stack to solve the issue.
Here is a link to the article which explains the stacking context and the z-index black-hole: The isolation property For more information, check out the read me file in the repository
What specific areas of your project would you like help with?Writing clean and maintainable code