javascript - 如何在不移动原始位置的情况下在另一个元素之前插入一个 html 元素

Question

我希望能够插入一个用户可以导航（左）的元素，而不会干扰用户当前看到的内容。也就是说，新元素将被插入到屏幕外的左侧，但不应看到当前“聚焦”元素（和其他可见元素）移动。目前我正在使用 insertbefore 执行此操作，测量新元素的 clientWidth 并从容器元素的边距中减去它。但是，获得 clientWidth 的成本很高，而且当我添加过渡时，这种方法被证明是有问题的。有没有更聪明的方法来做到这一点？我会认为这是一个相当普遍的问题 - 在另一个元素之前插入一个元素而不改变其他所有内容。

Answer 1

您可以使用一些 CSS 来实现这一点。插入一个没有高度的包装 div，但是overflow: visible，在这个 div 中插入你想要的元素：

.wrapper {
    height: 0;
    overflow: visible;
}

.wrapper div {
    margin-left: 100%;
}