Higher z-Index on an unknown website

Question

I am trying to make a nice UI for a userscript i did to enhance the Moodle at my school.

I need to make a progressbar at the top of the browser viewport, so wherever the user scrolls, it will always be visible.

I know it has to have position:fixed; but i can't deal with z-Indexes. I tried everything that came to my mind, from maximum z-Indexes, to appending on body, on document, ..., but no luck.

This is the code i have now (a bit messy. i am adding html using jquery so...):

$("#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 little bit more beautiful, (im appending this 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>

Still messy.

I just need it to be on top of everything.

The question is, is there any way to override z-Indexes, or to know the highest one on a page to put mine even higher, is what i am trying to do possible?

Answer 1

它不可见，因为它的宽度为零。