title: How does positioning work in HTML/CSS?
body: <p>I'm trying to make a drag-and-drop engine in JavaScript. Right now, I'm adding a bounds feature which will trap the <code>.drag</code> object inside its parent element. However, to do this, I need to understand how positioning works in html, and I don't. Can anyone thoroughly explain it?</p>
  
  <p>Javascript Engine:</p>
  
  <pre><code>// JavaScript Document
  
  var posX;
  var posY;
  var element;
  var currentPos;
  
  document.addEventListener("mousedown", drag, false);
  
  function drag(event) {
      if(~event.target.className.search(/drag/)) {
          element = event.target;
          element.style.zIndex="100";
          currentPos = findPos(element);
          posX = event.clientX -currentPos.x;
          posY = event.clientY -currentPos.y;
              if(~event.target.className.search(/bound/))
                  document.addEventListener("mousemove", boundMovement, false);
              else
                  document.addEventListener("mousemove", freeMovement, false);
      }
  }
  
  function freeMovement(event) { // This functions works
  
      if (typeof(element.mouseup) == "undefined")
          document.addEventListener("mouseup", drop, false);
      //Prevents redundantly adding the same event handler repeatedly
  
      element.style.left = event.clientX - posX + "px";
      element.style.top = event.clientY - posY + "px";
  }
  
  function boundMovement(event) { // This function doesn't work
  
      if (typeof(element.mouseup) == "undefined")
          document.addEventListener("mouseup", drop, false);
      //Prevents redundantly adding the same event handler repeatedly
  
      // Below logic is false- I wish to understand why =]
      currentPos = findPos(element.offsetParent);
      if((event.clientX - posX) &lt;= currentPos.x)
          element.style.left = event.clientX - posX + "px";
      if((event.clientY - posY) &lt;= currentPos.y)
          element.style.top = event.clientY - posY + "px";
  }
  
  function drop() {
      element.style.zIndex="1";
      document.removeEventListener("mousemove", boundMovement, false);
      document.removeEventListener("mousemove", freeMovement, false);
      document.removeEventListener("mouseup", drop, false);
      //alert("DEBUG_DROP");
  }
  
  function findPos(obj) { // Donated by `lwburk` on StackOverflow
      var curleft = curtop = 0;
      if (obj.offsetParent) {
          do {
              curleft += obj.offsetLeft;
              curtop += obj.offsetTop;
          } while (obj = obj.offsetParent);
          return { x: curleft, y: curtop };
      }
  }
  </code></pre>
  
  <p>Here is the CSS I am using:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  .drag {
      position: absolute;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
  }
  
  .bound {
      /* Class to signify that the drag_object can not leave the parent element */
      ;
  }
  
  .square {
      width: 100px;
      height: 100px;
      background: red;
      cursor:move;
  }
  
  p {
      padding: 0px;
      margin: 0px;
      outline-style: dotted;
      outline-color: #000;
      outline-width: 1px;
  }
  </code></pre>
  
  <p>Some example HTML:</p>
  
  <pre><code>&lt;p class="drag bound square"&gt;Thing One&lt;/p&gt;
  &lt;p class="drag square"&gt;Thing Two&lt;/p&gt;
  </code></pre>
  
  <p>Please note I am including the JavaScript so that if I have questions on how things are applied relative to what I've written. Also, thank you all for reading and helping. StackOverflow has been an exceptional resource in learning how to code in JavaScript.</p>
  
  <p>EDIT:</p>
  
  <p>1) I should say that I am coding the engine to help me learn the language. This is my first week of JavaScript, and I would like to be able to code in the language before I use a library.</p>
  
  <p>2) For example I would really like for someone to explain how offsets are working here. I would like to know how instead of using <code>position:absolute</code> to make my JavaScript engine, I can use <code>position:relative</code> so that elements can stack on top of each other ect.</p>