JavaScript - How To Create Absolute, And Then Fixed Div?

//compound interest
function checkNumber2(input, min, max, msg)
{
msg = msg + " field has invalid data: " + input.value;
var str = input.value;
for (var i = 0; i < str.length; i++)
  {
var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.')
    {
alert(msg);
return false;
    }
  }
var num = parseFloat(str)
if (num < min || max < num)
  {
alert(msg + " not in range [" + min + ".." + max + "]");
return false;
  }
input.value = str;
return true;
}
function computeField2(input)
{
if (input.value != null && input.value.length != 0)
input.value = "" + eval(input.value);
computeForm(input.form);
}
function computeForm2(form)
{
if ((form.payments.value == null || form.payments.value.length == 0) ||
(form.interest.value == null || form.interest.value.length == 0) ||
(form.principal.value == null || form.principal.value.length == 0))
  {
return;
  }
if (!checkNumber(form.payments, 1, 480, "# of payments") ||
!checkNumber(form.interest, .001, 99, "Interest") ||
!checkNumber(form.principal, 0, 10000000, "Principal"))
  {
form.payment.value = "Invalid";
return;
  }
var i = form.interest.value;
if (i > 1.0)
  {
i = i / 100.0;
form.interest.value = i;
  }
i /=12;
var pow=1;
for (var j=0; j < form.payments.value; j++)
pow=pow * (1 + i);
money="" + .01* Math.round(100*(form.principal.value * pow * i) / (pow - 1));
dec=money.indexOf(".");
dollars = money.substring(0,dec);
cents=money.substring(dec+1,dec+3);
cents=(cents.length < 2) ? cents + "0" : cents;
money=dollars + "." + cents;
form.payment.value = money;
}
function clearForm2(form)
{
form.payments.value = "";
form.interest.value = "";
form.principal.value = "";
}
//STOP compound interest

<div style="position:relative">


<script type="text/javascript">

if (ie4||DOM2)
  document.write('<div style="position:relative"><div id="fscroller" style="position:absolute;top:0;left:0;border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>


</div>

function changecontent(){

var index = Math.floor ( Math.random() * fcontent.length ); 
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}

<script language="javascript" type="text/javascript">
        var floating_header = function() {

            this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

            this.getXY = function(o) {
                var y = 0;
                var x = 0;
                while (o != null) {
                    y += o.offsetTop;
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
                return { "x": x, "y": y };
            }

            this.setheader = function() {
                if (window.header == undefined) {
                    floating_header();
                }
                var screenpos = this.scrollTop;
                var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
                if (screenpos > window.theady - 100 && screenpos < theady_max) {
                    window.header.style.position = 'absolute';
                    window.header.style.top = this.offsetTop;
                    window.header.style.display = 'block';
                    window.headerOffsetTop = this.offsetTop;
                }
                else {
                    if (screenpos != undefined && window.header != undefined) {
                        window.header.style.position = '';
                        window.header.style.top = '';
                        window.headerOffsetTop = undefined;
                        window.header = undefined;
                    }
                    else {
                        if (window.headerOffsetTop) {
                            window.header.style.position = 'absolute';
                            window.header.style.top = window.headerOffsetTop;
                            window.header.style.display = 'block';
                        }
                    }
                }
            }
            document.getElementById("divcn").onscroll = this.setheader;
            this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
            this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
        };
        floating_header();        
    </script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<form>
<meta content="MSHTML 6.00.2900.5921" name="GENERATOR"></head>
<body><strong>Quantity:</strong> <select id="qty" onchange="Calculate();" size="1" 
name=qty><option value="1" selected>1</option> <option value="2">2</option> 
  <option value="3">3</option> <option value="4">4</option> <option 
  value=5>5</option> <option value="6">6</option> <option value="7">7</option> 
  <option value="8">8</option> <option value="9">9</option> <option 
  value=10>10</option> &lt;\SELECT&gt;</select>&nbsp; <strong>Banner 
Width:</strong> <select id="height" onchange="Calculate();" size="1" 
  name=height><option value="2" selected>2</option> <option value="3">3</option> 
  <option value="4">4</option> 
&lt;\SELECT&gt;</select>&nbsp;&nbsp;&nbsp;<strong>Banner Length:</strong> 
<select id="length" onchange="Calculate();" size="1" name="length"><option value="4" 
  selected>4</option> <option value="5">5</option> <option value="6">6</option> 
  <option value="7">7</option> <option value="8">8</option> 
&lt;\SELECT&gt;</select>&nbsp;&nbsp;&nbsp;<strong>Total sq ft:&nbsp;&nbsp; <font 
size=4><label id="lblRes"><!-- a Label to locate result in it -->8 
</label></form></font></span></span></font>
<p></p></span></span></font></font></strong>
<div></div>
<script language="javascript">
		function Calculate()
		{
			var h = document.getElementById('height').value;
			var l = document.getElementById('length').value;
			var q = document.getElementById('qty').value;
			var result = h * l * q;
			document.getElementById('lblRes').innerHTML = result;
		}
	</script>
</font></strong></body></html>

function createTextArea(e){
     getMouseCoords(e);//sets posy, posx
     var newDiv= document.createElement("textarea");
     newDiv.setAttribute("name","comment[]");
     newDiv.style.visibility="visible";
     newDiv.style.top= (posy) +'px';
     newDiv.style.left= (posx) +'px';
     newDiv.style.overflow="hidden";
     // append to the document FORM
     var form=getTagFromArray("form","commentform");
     form.appendChild(newDiv);
}

<img id="theImage" src="random.gif" border=1 onclick="createTextarea(event);">

//get data from database
//forloop for each textarea saved in database
echo "<textarea  name=\"comment[]\" style=\"top:".($locy)."px;left:"
.($locx)."px;overflow:hidden;visibility:hidden;\" >".$row['comment']."</textarea>";
//end forloop

//returns the same string on every call.
//regardless of the coordinate values. which change
var GM = document.getElementById('TP');
if(GM.hasChildNodes)
  {
   var GMC = GM.getElementsByTagName('div');
   var str = '';
   for(i = 0; i < GMC.length; i++)
      {
       if(GMC[i].hasChildNodes)
         {
          for(var j = 0; j < GMC[i].childNodes.length; j++)
             {
              var gmc = GMC[i].childNodes[j];
              var gmcTxt = gmc.childNodes[0].data;
              str += gmcTxt;
             }
         }
      }
  }
alert(str);

document.getElementByTagName('[elem]');

function dropIn(evt)
{
    var root = document.getElementsByTagName("body")[0];
    evt.preventDefault();
    var id = evt.dataTransfer.getData("text");

     if(ev.target.getAttribute('data-drop') == id)
        ev.target.appendChild(document.getElementById(id));
}

<div id="box1"  style="position: absolute; top: 220px; left: 220px;" ondragover="dragIn();" ondrop="dropIn();" >
<img id="img1" class="resize" src="wreck.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div>
<div id="loc1" data-drop="img1" style="border:1px solid black; position:absolute;  left:400px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" ></div>

<div id="box2"  style="position: absolute; top: 220px; left: 300px;" ondragover="dragIn();" ondrop="dropIn();" >
<img id="img2" class="resize" src="nah.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div>
<div id="loc2" data-drop="img2" style="border:1px solid black; position:absolute;  left:560px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" ></div>

if(evt.target.getAttribute('data-drop') == id){

      evt.target.appendChild(document.getElementById(id));
      } 
      else{
          evt.target.appendChild(document.getElementsByAttribute('data-drop'));
      }