Converting absolute positioning to relative - css

Question

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.
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.
The widget can be seen HERE. Basically it's a search box of sorts that will allow some filtering with the left-most button.
The components are as such:
#refine: The left-most button.
#refineDropdown: The drop down menu that appears when you click on the refine button
#search: The input box
#dropdown: The live-type search filtering box
#submit: The right-most search button
Question: 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.
CSS:
.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 }

Answer 1

I believe the reason you want this to be done with relative positioning is that you believe absolute positioning is always absolute in relation to the page. Surprise: it isn't.
In fact, what it is absolute to is the first parent that has its position attribute set. As such, the simple solution could be to wrap your entire widget into a div and declare the position of that div as relative.
For example:
<p>adsadds
<div class='container'>
<div class='absolutelyPositioned'>BlaBla</div>
</div>
sddasda</p>
With this css:
.container
{
position: relative;
}
.absolutelyPositioned
{
position: absolute;
top: 100px;
left: 100px;
}
will have the inner div with "BlaBla" in it position not at (100, 100) of the web page, but of the container div. In other words if I turn <p>adsadds into <p>adsadds <br /> the "BlaBla" will be pushed down as well.