确保元素始终位于顶部

Question

我正在构建一个非常简单的Chrome扩展，它将在任何youtube.com页面上放置一个可点击的图像。

该图像显示出来并具有其预期的单击功能，但它位于页面上显示的任何其他元素下方。这是我的代码：

const linkItem = document.createElement("a");
linkItem.href="https://www.youtube.com/";
linkItem.innerHTML = "<img src='https://imgur.com/gBgwnSa.png' title='YouTube Home'>";
linkItem.setAttribute("style", "position:absolute;top:50px;left:200px;");
document.getElementsByTagName("body")[0].appendChild(linkItem);

这个位置只是一个占位符。

如何将图像设置为始终显示在页面的任何其他元素之上(最好不必创建CSS样式表(？我知道这是一个初学者的问题，但如果有任何帮助，我们将不胜感激！：(

Answer 1

您可以在CSS上使用"z-index"属性。您只需要将其设置为一个足够高的值，它将始终高于其他具有较小/null z索引集的所有索引。

在这种情况下：

linkItem.setAttribute("style", "position:absolute;top:50px;left:200px;z-index:99");