How to insert an html element before another without shifting the originals position

Question

I would like to be able to insert an element that a user can navigate (left) to without disturbing what the user currently sees. that is, the new element will be inserted offscreen, to the left, but the currently "focused" element (and the other visible ones) shouldn't be seen to move. Currently I am doing this using insertbefore, measuring the clientWidth of the new element and subtracting that from the margin of the container element. However, clientWidth is expensive to get, and this method is proving problematic when I add transitions. Is there a cleverer way to do this? I would have thought it's a fairly common problem - insert an element before another without shifting everything else.

Answer 1

You could use some CSS to achieve this. Insert a wrapping div with no height, but overflow: visible , insert the elements you want inside this div:

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

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