StumbleUpon chrome扩展程序如何在google主页导航栏上方插入div？

Question

我正在开发一个扩展，它将在所有网页的顶部插入一个水平div。它适用于大多数页面，但对于http://google.com，谷歌的导航栏显示在我的顶部。 stumbleUpon chrome扩展程序具有类似的功能，除了它们的水平div显示在谷歌的导航栏上方。我正在使用内容脚本来插入div。我已经尝试过body.prepend（），它似乎没有完成这项工作。 此外，无论滚动位置如何，我都希望将栏固定在顶部。我把它作为位置：固定，顶部：0％但仍然没有运气。 任何帮助或指向正确的方向将不胜感激。

Answer 1

处理此类情况时，请务必使用webkit检查器中的计算样式框。可能需要一些时间来找到导致问题的样式的正确元素，但这是值得的。

我在http://google.com处为尸体添加了div，并应用了以下样式：

element.style {
  position: fixed;
  top: 0;
  left: 0;
  height: 35px;
  width: 100%;
  background-color: red;
}

我注意到红色从谷歌的导航栏后面伸出来，所以我觉得它可能是一个z索引问题。

我将前置div的z-index设置为99999，并按预期显示。经过进一步调查，我发现Google的div＃gbx3的z-index为990，其中的导航链接的z-index为991.你不想掩盖谷歌导航栏，所以我们将不得不在上面设置一些自定义样式。

如果您将Google的div #mngb设置为

element.style {
  position: absolute;
  top: 35px;
}

这将推动Google的导航栏向下，但不会在页面上移动任何其他内容。

这应该足以让你入门。它不是完美的，它不会处理任何其他内容，并没有推广到任何其他网站，但它是一个良好的开端。