javascript - 确保元素始终位于顶部

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”属性。您只需将其设置为足够高的值，并且它将始终高于具有较小/空 z 索引集的所有其他内容。

在这种情况下:

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