Mortgage Calculator using html, tailwindcss and javascript

Solution retrospective
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
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Oghenetejiri Samuel Amrasa's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord