css - -webkit-transform 的替代方案：transformY?

Question

我正在创建一个在特定页面顶部显示 iframe 的 chrome 扩展。此 iframe 是固定的并放置在打开 body 标记之前。

为了为这个 iframe 保留一个位置，我使用 CSS 向下移动包括固定元素的主体：

-webkit-transform: translateY(40px);

它似乎在许多网站上都可以正常工作，但在其他一些网站上，例如 facebook，它会导致问题。滚动条显示在右侧。

有没有我可以尝试避免这个问题的替代方法。任何帮助，将不胜感激

Answer 1

只需高出一个节点。而且，你会猜到，它就是html元素。不幸的是，我不知道像 body 一样访问它的方法：document.body.

但我找到了一个简单的方法，使用document.body.parent.

在那里，您设置了 css 属性。

document.body.parent.style.webkitTransform = 'translateY(40px)';

除此之外，margin-top也可以：

document.body.parent.style.marginTop = '40px';