javascript - TranslateY 制造冲突，寻找替代方案来下推页面内容

Question

我正在创建一个工具栏，它被注入到 IFrame 的页面中。我的问题是下推页面内容并在顶部为工具栏创建一个 45px 的空间。

下面的代码在某些页面上运行良好，但在其他页面上确实会与某些元素（例如 css-tricks.com 上 codepen 的小部件）产生冲突，然后在注入工具栏后某些选项卡不再可点击。

var height = '45px';
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

我也尝试过创建一个类，但这只会下推某些页面上的内容，例如它不适用于像 stackoverflow 这样的网站。

注入脚本以创建测试类：

var html = '<div class="test"></div>';
document.body.insertAdjacentHTML('beforebegin', html);

CSS：

.test {
height: 45px;

}

标签： javascripthtmlcssdom