javascript - 未知网站上更高的 z-Index

Question

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

我需要在浏览器视口(viewport)的顶部制作一个进度条，这样无论用户滚动到哪里，它都始终可见。

我知道它必须有 position:fixed; 但我无法处理 z-Indexes。我尝试了我想到的所有方法，从最大 z-Indexes 到附加到正文、文档……，但没有成功。

这是我现在的代码(有点乱。我正在使用 jquery 添加 html，所以...):

$("#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>"));

更漂亮一点，(我将其附加到 $("#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>

还是很乱。

我只需要它在一切之上。

问题是，是否有任何方法可以覆盖 z-Indexes，或者知道页面上最高的索引以将我的索引设置得更高，这是我正在尝试做的可能吗？

Answer 1

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