Question

how can I position a div under another element without the rest of the layout is affected of the div element?

<div style="margin:50px">
    <div style="margin:20px; padding:10px; width:100px">
        here is a little <span id="test" style="font-weight:bold">test</span>.. some text some text some text some text
    </div>
</div>
<script>
    var elm = document.getElementById('test');
    var div = elm.appendChild(document.createElement('div'));
    with(div){
        style.position = 'relative';
        style.left = elm.offsetLeft+'px';
        style.background = '#ffffff';
        style.width = '100px';
        style.height = '50px';

        innerHTML = 'wooop';
    }
</script>

Answer 1

style.left = elm.offsetLeft + "px";