I'm in the process of enhancing the Moodle platform at my school with a userscript, and I want to create a sleek UI for it.
One feature I want to add is a progress bar that stays fixed at the top of the browser viewport so that it remains visible as the user scrolls.
I understand that I need to use position:fixed;, but I'm struggling with z-indexes. I've tried various approaches like setting maximum z-index values and appending elements to different parts of the document, but haven't had any success.
This is the current messy code I have (I'm dynamically adding HTML using jQuery):
$("#page-header").append($("<div id='progress_container' style='background-color:black;position:fixed;'><div id='progress' style='height:15px;background-color:green;width:0%;'></div></div>"));
A cleaner version would look something like this (appending to $("#page-header")):
<div id='progress_container' style='background-color:black; position:fixed; top: 0px; left: 0px;'>
<div id='progress' style='height:15px; background-color:green; width:0%;'></div>
</div>
Although neater, it's still not ideal.
All I really want is for it to always be on top of everything else.
So, I'm wondering if there's a way to override z-index values or find the highest one on the page to ensure mine is above it. Is what I'm trying to achieve even possible?