时间戳

首页 > 解决方案 > 确保元素始终位于顶部

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

标签： javascripthtml

解决方案

您可以在 CSS 上使用“z-index”属性。您只需将其设置为足够高的值，它就会始终超过其他所有具有较小/空 z-index 集的东西。

在这种情况下：

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

推荐阅读