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

Question

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

Answer 1

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

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

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