Css 如何在相对位置和绝对位置之间转换元素

    window.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            var element = document.querySelector(".the-changing-span");
            positionTransition(element);
        }, 1000);
    });
    
    function positionTransition(element) {
        var rectBefore = element.getBoundingClientRect(); //get old coordinates
        
        //change positioning:
        element.style.position = "absolute";
        element.style.left = "50vw";
        element.style.top = "50vh";
        
        var rectAfter = element.getBoundingClientRect(); //get new coordinates
        
        //calculate the difference:
        var xDiff = -(rectAfter.x - rectBefore.x);
        var yDiff = -(rectAfter.y - rectBefore.y);
        
        //translate, so that the absolute positioned element seems to be in the old place:
        element.style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
        
        //finally, make the transition, which works because it remains in position: absolute
        setTimeout(function() {
            element.style.transition = "transform 1000ms ease-in-out";
            element.style.transform = "";
        }, 10);
    }

    .the-changing-span {
        position: relative;
    }
    
    span {
        border: 1px solid #AAA;
    }

    <span class="a-simple-span">
        stays
    </span>
    <span class="the-changing-span">
        changes
    </span>