# Intro to the CBE Positioning Methods ## Notes See the object reference for an explanation of the parameter syntax used on this site, and for complete details on these methods. It is the object's top-left corner which is positioned. The point (0,0) is always at the top-left corner of the object's containing object (it's parent). ## Positioning An Element left([iX]) left sets the x-coordinate. Returns the current x-coordinate. top([iY]) top sets the y-coordinate. Returns the current y-coordinate. Example 1 Sets E1's x-coordinate to 0, and sets E2's y-coordinate to 0.
    function windowOnload() {
      var e1 = document.getElementById('E1').cbe;
      e1.left(10);
      var e2 = document.getElementById('E2').cbe;
      e2.top(0);
    }
Example 2 Sets E2's top-left corner at it's parent's center.
    function windowOnload() {
      var e2 = document.getElementById('E2').cbe;
      var x = e2.parentNode.width() / 2;
      var y = e2.parentNode.height() / 2;
      e2.left(x);
      e2.top(y);
    }
Top moveBy(iDx, iDy) moveBy adds the arguments to the current coordinates. Returns void. moveTo(iX, iY [, xEndListener ]) - pixel coordinates moveTo sets the (x,y) coordinates (moves the object to the specified point). Returns void. Example 3 Moves E1 to the same position as E3, then moves it by the width and height of E3.
    function windowOnload() {
      var e1 = document.getElementById('E1').cbe;
      var e3 = document.getElementById('E3').cbe;
      e1.moveTo(e3.pageX(), e3.pageY());
      e1.moveBy(e3.width(), e3.height());
    }
E3 - relatively positioned Top moveTo(sCardinal [, iMargin [, bOutside [, xEndListener ]]]) - cardinal coordinates moveTo moves the object to a cardinal position - north, south, etc. (see the object reference for details). Returns void. Example 4 Moves both E1 and E2 to the center of their respective containers.
    function windowOnload() {
      var e1 = document.getElementById('E1').cbe;
      e1.moveTo('center')
      e1.firstChild.moveTo('center');
    }
Example 5 Moves E1 to the center, then moves E2 half-way off the 'east' edge of it's container.
    function windowOnload() {
      var e1 = document.getElementById('E1').cbe;
      var e2 = document.getElementById('E2').cbe;
      e1.moveTo('center')
      e2.moveTo('e', -e2.width()/2, true);
    }

E1
draggable
resizeable
E2
draggable
resizeable