title: Converting absolute positioning to relative
body: <p>I was stupid and built a web widget in jsFiddle using absolute positioning because it was just a quick prototype to show someone how the functionality would work.</p>
  
  <p>Well we decided that we're gonna use it now and I'm having a hell of a time converting the elements to utilize relative positioning. Also, I'm in the middle of trying to convert this to a jQuery UI widget, so I want everything set up so that it just dumps onto the page without issue.</p>
  
  <p>The widget can be seen <strong><a href="http://jonathonmoore.com/proto/" rel="nofollow">HERE</a></strong>. Basically it's a search box of sorts that will allow some filtering with the left-most button.</p>
  
  <p>The components are as such:</p>
  
  <ul>
  <li><strong>#refine</strong>: The left-most button.</li>
  <li><strong>#refineDropdown</strong>: The drop down menu that appears when you click on the refine button</li>
  <li><strong>#search</strong>: The input box</li>
  <li><strong>#dropdown</strong>: The live-type search filtering box</li>
  <li><strong>#submit</strong>: The right-most search button</li>
  </ul>
  
  <p><strong>Question:</strong> When creating a widget, should positioning be done relatively or absolutely? If I have multiple instances of this on a page, the position of the dropdowns should be independent of their position on the page, but I don't fully understand positioning and HTML arrangement to get this to work.</p>
  
  <p>CSS:</p>
  
  <pre><code>.inline { float:left; }
  .clearBoth { clear:both; }
  #refine {    
      position: relative;
      margin-right: -3px;    
      overflow:hidden;
      white-space:nowrap;
      background: rgb(238,238,238); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
      border-top-left-radius:4px;
      border-bottom-left-radius:4px;
      border:1px solid #AAA;
      height:12px;
      padding:6px 25px 6px 6px;
      text-align:center;
      font-size:11px;
      font-family:Helvetica, sans-serif;
      color:#666;
      text-shadow:0px 1px 0px #e8eae5;
  }
  #refine:hover {
      background: rgb(238,238,238); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
      cursor:pointer;
  }
  #submit {
      float: left;
      margin-right:-1px;
      overflow:hidden;
      white-space:nowrap;
      background: rgb(238,238,238); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
      border-top-right-radius:4px;
      border-bottom-right-radius:4px;
      border:1px solid #AAA;
      height:12px;
      padding:6px 6px 6px 6px;
      text-align:center;
      font-size:11px;
      font-family:Helvetica, sans-serif;
      color:#666;
      text-shadow:0px 1px 0px #e8eae5;
  }
  #submit:hover {
      background: rgb(238,238,238); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
      cursor:pointer;
  }
  .refineClicked {
      background:white !important;
      border-bottom-left-radius:0px !important;
      border-bottom:none !important;
  }
  .arrow-down {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #666;
      right: 7px;
      top: 10px;
  }
  #search {
      float: left;
      height: 24px;
      margin-right:-5px;
      padding: 0px 7px 0px 7px;
      border:1px solid #AAA;
      color:#444;    
  }
  #search:focus { outline:none }
  #refineDropdown {
      position:relative;
      top:40px;
      left:30px;
      width:150px;
      max-height:200px;
      background:#fff;
      border-left:1px solid #AAA;
      border-right:1px solid #AAA;
      border-bottom:1px solid #AAA;
      word-wrap:normal;
      overflow:auto;
  }
  
  #dropdown {
      top: 76px;
      padding:3px;
      width:200px;
      max-height:200px;
      background:#fff;
      border-left:1px solid #CCC;
      border-right:1px solid #CCC;
      border-bottom:1px solid #CCC;
      word-wrap:normal;
      overflow:auto;
      left: 59px;
      position: absolute;
  }
  ul {
      list-type:none;
      margin:0;
      padding:0;    
  }
  li {
      padding:5px 10px 5px 10px;
  }
  li:hover {
      margin:-1px;
      background:#E5F3FF;
      border:1px solid #3366FF;
      cursor:pointer;  
  }
  .selected {
      margin:-1px;
      background: #E5F3FF;
      border:1px solid #3366FF;
  }
  .hidden { display:none }
  </code></pre>