Convert floating divs to absolute

HTML

<div id="container">
    <div class="floater">1</div>
    <div class="floater">2</div>
    <div class="floater">3</div>
    <div class="floater">4</div>
</div>

<br/>
1. You can try to resize the Result pane, to see the float in action.
<br/>
2. Convert float to absolute: <button id="convert">Convert</button>
<br/>
3. Move div #2 away, to see it's not floating anymore: <button id="move">Move</button>

CSS

#container {
    height: 400px;
    background-color: #CCC;
}

.floater {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

JavaScript

var floaters = document.getElementsByClassName("floater");

// convert initial (floating) positions to absolute
function convert() {
    var index, floater, rect;
    for (index=floaters.length-1; index>=0; index--) {
        floater = floaters[index];
        console.log(floater.textContent);
        rect = floater.getBoundingClientRect();
        floater.style.left = rect.left + "px";
        floater.style.top = rect.top + "px";
        floater.style.position = "absolute";
        floater.style.float = "none";
    }
}

// test "animation"
function move() {
    floaters[1].style.top = "200px";
}

// bind
document.getElementById("convert").onclick = convert;
document.getElementById("move").onclick = move;