Positioning Test

by sberube

HTML

<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer {
    width: 800px;
    height: 800px;
    border: 1px solid black;
    position: relative;
}
#inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px dashed red;
    transform: scale(0.5);
    -webkit-transform-origin: 0 0 0;
    overflow: show;
}
#node {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 10px;
}

JavaScript

var scale = 0.5;

function createNode(top, left) {
    if (!top) { top = 0 };
    if (!left) { left = 0 };
    
    var $node = $('<div></div');
    $node.attr('id', 'node');
    $node.css({
        'top': top + "px",
            'left': left + "px"
    });
    return $node;

}
$('#outer').append(createNode(0, 375)); // Centered (width / 2) - (nodewidth / 2)
$('#inner').append(createNode(250, 375));