〔高分〕求救div的位置问题

都是台湾地震惹的祸，下面是我的主要代码：// pop up a data input block
function popupDIV(event,div){    var myDiv=document.getElementById(div);    var element;
    if(event.srcElement){
    element=event.srcElement;
    }else{
    element=event.target;
    }
    var top=element.offsetTop;
    var left=element.offsetLeft;

    /*
    var o=element;
    while(o.parentNode!=null){
     o=o.parentNode;
     if(o.nodeName=='DIV') break;
    }
    */

    var parentElement;
    while(element.offsetParent!=null) {   // Parse the parent hierarchy up to the document element
parentElement = element.offsetParent    // Get parent object reference
        left += parentElement.offsetLeft // Add parent left position
        top += parentElement.offsetTop;
element = parentElement
    }       myDiv.style.left=left+"px";   //event.clientX+"px";
    myDiv.style.top=top+"px";       //event.clientY-95+"px";
    if(myDiv.style.display!=""){
    myDiv.style.display="";
    }else{
        myDiv.style.display="none";
    }
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html;">
<title>Xpert4Health by Terida</title>
<link rel="stylesheet" href="include/newstyle.css" title="JustinStyle" type="text/css">
</head><body>
  <div id="bracketDiv" class="logicGroupEditDiv" style="display: none;">
    <select name="bracket" onchange="javascript:calculateLine(this);">
      <option value=""> - - -</option>
      <option value="LEFT">(</option>
      <option value="RIGHT">)</option>
    </select>
  </div><div id="masthead">
  <h1 id="siteName">Test layout</h1>
</div><div id="pageName">
  Define Logical Rule
</div><div id="pagecell1">    <div id="pageNav">
    <div id="sectionLinks">
      <a href="#">Section Link</a>
  <a href="#">Section Link</a>
    </div>    <div class="relatedLinks">
      <h3>Related Link Category</h3>
    </div>    <div class="relatedLinks">
      <h3>Related Link Category</h3>
      <a href="#">Related Link</a>
  <a href="#">Related Link</a>
    </div>
    <div id="advert">
      Advertisement.
   </div>
  </div>  <div id="content">

<script type="text/javascript">// pop up a data input block
function popupDIV(event,div){    var myDiv=document.getElementById(div);    var element;
    if(event.srcElement){
    element=event.srcElement;
    }else{
    element=event.target;
    }
    var top=element.offsetTop;
    var left=element.offsetLeft;

    /*
    var o=element;
    while(o.parentNode!=null){
     o=o.parentNode;
     if(o.nodeName=='DIV') break;
    }
    */

    var parentElement;
    while(element.offsetParent!=null) {   // Parse the parent hierarchy up to the document element
parentElement = element.offsetParent    // Get parent object reference
        left += parentElement.offsetLeft // Add parent left position
        top += parentElement.offsetTop;
element = parentElement
    }       myDiv.style.left=left+"px";   //event.clientX+"px";
    myDiv.style.top=top+"px";       //event.clientY-95+"px";
    if(myDiv.style.display!=""){
    myDiv.style.display="";
    }else{
        myDiv.style.display="none";
    }
}
function testPopup(left,top){
      //alert('sss');
      //   div name
        var myDiv=document.getElementById('bracketDiv');

     myDiv.style.left=left+"px";   //event.clientX+"px";
     myDiv.style.top=top+"px";       //event.clientY-95+"px";

     myDiv.style.position="absolute";

    if(myDiv.style.display!=""){
    myDiv.style.display="";
    }else{
        myDiv.style.display="none";
    }

}</script>
<div id="subPageName">
    Evaluation: justin test
  <br>

    
</div>
<form name="logicGroup" method="post" action="" class="logicGroupEdit"><br>
  

  <input type="button" value="(...)" name="openBracket" onclick="javascript:popupDIV(event,'bracketDiv');">

  <input value="Boolean" name="OpenBoolean" onclick="javascript:popupDIV(event,'outerOperatorDiv');" type="button">
   
  <input value="Number" name="openNumber" onclick="javascript:testPopup(20,102);" type="button">
   <div id="instanceDiv" class="logicGroupEditDiv" style="display: none;">
    <select name="instanceLeft" onchange="javascript:calculateLine(this);">
      <option value=""> - - -</option>
      <option value="550">CURRENT</option>
    </select>
    <br>
    <select name="instanceRight" onchange="javascript:calculateLine(this);">
      <option value=""> - - -</option>
      <option value="550">CURRENT</option>
    </select>
  </div>  <div id="evaluationDiv" class="logicGroupEditDiv" style="display: none;">
        <input name="evaluationLeft" type="hidden">
        <input name="relationLeft" type="text">
    <br>
        <input name="evaluationRight" type="hidden">
        <input name="relationRight" type="text">
  </div>
  <div id="criterionDiv" class="logicGroupEditDiv" style="display: none;">
    <select name="criterionLeft" onchange="javascript:calculateLine(this);">
     <option value="">- - -</option><option value="63563">Biopsy</option><option value="5506">Cardiac Failure</option><option value="2720">Creatinine</option>
    </select>
    <br>
    <select name="criterionRight" onchange="javascript:calculateLine(this);">
      <option value="">- - -</option><option value="63563">Biopsy</option><option value="5506">Cardiac Failure</option><option value="2720">Creatinine</option>
    </select>
  </div>  <div id="outerOperatorDiv" class="logicGroupEditDiv" style="left: 255px; top: 97px; display: none;">
    <select name="outerOperator" disabled="disabled" style="display: none;">
      <option value=""> - - -</option>
      <option value="NOT">NOT</option>
</select>    <select name="booleanOperator" onchange="javascript:calculateLine(this);">
      <option value=""> - - -</option>
      <option value="AND">AND</option>
    </select>
  </div>  <div id="measureDiv" class="logicGroupEditDiv" style="display: none;">
        <textarea name="measure" cols="50" rows="4" style="display: none;">0</textarea>
        <textarea name="measureDisp" cols="50" rows="4" style="display: none;"></textarea>
  </div>
  <div id="operatorDiv" class="logicGroupEditDiv" style="display: none;">
    <select name="innerOperator" onchange="javascript:calculateLine(this);">
      <option value="">- - -</option>
      <option value="EQ">=</option>
    </select>
  </div>  <div id="calculationNumberDiv" class="logicGroupEditDiv" style="display: none;">
     <input name="calculationNumber" style="width: 120px;" onchange="javascript:calculateLine(this);" type="text">
  </div>
<textarea name="debugInfo" cols="55" rows="12" style="display: none;"></textarea>
    <br><br></form><script type="text/javascript">
displayTable=document.getElementById("myDisplayTable");
dataTable=document.getElementById("myDataTable");
singleNewLine=document.getElementById("singleNewLine");
siglePreviousLine=document.getElementById("siglePreviousLine");
//reConstructDisplayTable();
</script>
</div>  <div id="siteInfo">
  </div></div><br>
</body></html>
/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************//* ********************************************* */
/* HTML tag styles                             */
/* ********************************************* */
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(../images/bg_grad.jpg) fixed;
}/******* hyperlink and anchor tag styles *******/a:link, a:visited{
color: #005FA9;
text-decoration: none;
}a:hover{
text-decoration: underline;
}/* ************* header tag styles ************* */h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
/*************** list tag styles ***************/ul{
list-style-type: square;
}ul ul{
list-style-type: disc;
}ul ul ul{
list-style-type: none;
}/********* form and related tag styles *********/
form {
margin: 0;
padding: 0;
}label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}input{
font-family: Arial,sans-serif;
}/************ Layout Divs   *********************/
#pagecell1{
position:absolute;
top: 102px;
left: 2%;
right: 2%;
width:95.6%;
padding: 53px 0px 0px 0px;
background-color: #ffffff;
}#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 400;
}#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;}#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Arial, Verdana, sans-serif;}#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
border-top:1px solid #ccd2d2;
font-size:14px;
color: #21536A;
}#content a:link, #content a:visited {
font-size:13px;
color: #21536A;
}#content a:hover {
font-size:13px;
color:#FF0000;
}
/***********       Component Divs   *************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}
/* ************* pageName styles *************** */
#pageName{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:350px;
background-color: #ffffff;
z-index:200;
padding: 5px 0px 14px 10px;
font: bold 175% Arial,sans-serif;
color: #000000;
margin: 0px;
overflow:hidden;
    white-space:nowrap;
border-bottom:1px solid #ccd2d2;
}#subPageName{
font:bold 100% Arial,sans-serif;
position:absolute;
top:0px;
left: 360px;
overflow:hidden;
margin: 0px;
float:left;
padding: 11px 0px 11px 0px;
color: #000000;
    white-space:nowrap;
z-index:300;
}#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}
/* *********** subglobalNav styles ************* */.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}.subglobalNav a:hover{
color: #cccccc;
}
/* ************* siteInfo styles *************** */
#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
    font-size:14px;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}/* *********** sectionLinks styles ************* */#sectionLinks{
margin: 0px;
padding: 0px;
}#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image:  url(../images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}
/* ************ relatedLinks styles ************* */.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}.relatedLinks h3{
padding: 10px 0px 2px 0px;
}.relatedLinks a{
display: block;
}
/**************** advert styles *****************/#advert{
padding: 10px;
}table {
    font-size: 13px;
    vertical-align:top;
    }th {
    background-color:#CCCCCC;
    vertical-align:top;
    font-size: 13px;
    }
td {
    vertical-align:top;
    font-size: 13px;
    }/* Input fields length */
.long {width:500px;}
.middle {width:350px;}
.short {width:150px;}
.number {width:50px;}
.float  {width:100px;}
.date  {width:87px;}
.box {
   border:1px solid #cccccc;
}
body,td,th,p,div,ol,ul,dl,li,input, select, p, textarea{
    font-family: Arial, sans-serif;
}
input, select, textarea{
font-size:13px;
}/* selector is css2 specification, but IE can't support */
.logicGroupEdit input[type="text"]{
    width:60px;
  }.logicGroupEditDiv{
   /* position:absolute; */
   /* position:relative;   */
   position:absolute;
   color:#000000;
   background-color:#CCCCCC;
   border-width:1px;
   padding: 3px 3px 3px 3px;
   width:auto;
   height:auto;
   left:60px;
   top:30px;
   z-index:1000;
  }

调试易

〔高分〕求救div的位置问题

解决方案 »