javascript - 确保元素始终在最上面

我正在构建一个非常简单的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样式表）？我知道这是一个初学者的问题，但是任何帮助将不胜感激！ :)

最佳答案

您可以在CSS上使用“ z-index”属性。您只需将其设置为足够高的值，并且它将始终覆盖设置了较小/空z-index的其他所有内容。

在这种情况下：

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