Javascript 未知网站上的高z索引

我正在尝试为一个用户脚本制作一个漂亮的UI，我在学校为增强Moodle所做的

我需要在浏览器视口的顶部创建一个progressbar，这样无论用户在哪里滚动，它都将始终可见

我知道它必须有

位置：固定但是我不能处理z索引。我尝试了我脑海中出现的一切，从最大z索引到在正文、文档上添加，但都没有成功

这是我现在的代码（有点凌乱。我正在使用jquery添加html，所以…）：

还是乱七八糟的

我只需要把它放在一切之上

问题是，有没有办法覆盖z索引，或者知道页面上的最高索引将我的索引放得更高，这是我试图做的吗？
它不可见，因为它的宽度为零。
它不可见，因为它的宽度为零。
因为那些内联样式，它很凌乱。：）@bažmegakapa我知道，但对我来说，像这样构建它们比为每行代码创建对象并为每行代码添加一条CSS规则更容易。z索引到底有什么问题？@gcq当然可读性更好（当然，最好使用单独的CSS）。现在比较容易的事，后来就成了麻烦事。也许你必须输入更多，但你会犯更少的错误，即使一周后你也能理解你的“一团糟”。@bažmegakapa记住这是一个用户脚本。我可以添加样式标签，但是我知道。因为那些内联样式，所以很混乱。：）@bažmegakapa我知道，但对我来说，像这样构建它们比为每行代码创建对象并为每行代码添加一条CSS规则更容易。z索引到底有什么问题？@gcq当然可读性更好（当然，最好使用单独的CSS）。现在比较容易的事，后来就成了麻烦事。也许你必须输入更多，但你会犯更少的错误，即使一周后你也能理解你的“一团糟”。@bažmegakapa记住这是一个用户脚本。我可以添加样式标签，但是我现在觉得自己太蠢了。当progressbar没有固定时，它在不指定宽度的情况下工作正常。我猜被修复会稍微改变一些事情。@gcq一个简单的块元素总是试图占用其父元素中的可用空间。但当您定位它（绝对或固定）时，它将尝试占用其子对象的宽度。因此，当它是空的，并且除了给定零之外没有其他维度时，它实际上是不可见的。简而言之没必要觉得自己很愚蠢，顺便说一句，我们都经历了这些阶段：）。我现在觉得自己很愚蠢。当progressbar没有固定时，它在不指定宽度的情况下工作正常。我猜被修复会稍微改变一些事情。@gcq一个简单的块元素总是试图占用其父元素中的可用空间。但当您定位它（绝对或固定）时，它将尝试占用其子对象的宽度。因此，当它是空的，并且除了给定零之外没有其他维度时，它实际上是不可见的。简而言之顺便说一句，我们都经历了这些阶段：）。
$("#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>"));

<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>