求教一个关于position：absoulte定位的问题

我做了一个web用户控件  放在模板里有偏差！！下面是控件的代码：
<body bgcolor="#ffffff" text="#000000" >
<div class="maskl" id="menuPos"  style="HEIGHT: 216px; LEFT: 90px; POSITION:relative; TOP: 59px; WIDTH: 132px; Z-INDEX: 1"><div id="menu1" onmouseout="menuBack(1)" onmouseover="menuOut(1)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1">
<div class="cardbottom" id="Layer1" style="HEIGHT: 115px; WIDTH: 100px; LEFT: 0px; POSITION: absolute; TOP: 17px;  Z-INDEX: 1">
<table align="center" border="0"  width="75">
 
  <tr>
    <td class="td1">选项一</td></tr>
  <tr>
    <td class="td1">选项二</td></tr>
  <tr>
    <td class="td1">选项三</td></tr>
  <tr>
    <td class="td1">选项四</td></tr>
  <tr><td>&nbsp;</td></tr></table>
  
</div>
<table border="0" cellpadding="0"  cellspacing="0" width="100">  <tr>
    <td height="18" width="14"><img alt="" height="18" src="~/images/BookCorner.gif" width="14" /></td>
    <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡一</td></tr></table></div>
 
 
<div id="menu2" onmouseout="menuBack(2)" onmouseover="menuOut(2)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 20px; WIDTH: 130px; Z-INDEX: 1">
<div class="cardbottom" id="Layer2"  style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<table align="center" border="0"  width="75">
 
  <tr>
    <td class="td1">选项一</td></tr>
  <tr>
    <td class="td1">选项二</td></tr>
  <tr>
    <td class="td1">选项三</td></tr>
  <tr>
    <td class="td1">选项四</td></tr>
  <tr>
    <td>&nbsp;</td></tr></table></div>
<table border="0" cellpadding="0" cellspacing="0" width="100">
  
  <tr>
    <td height="18" width="14"><img alt="" height="18" src="../images/BookCorner.gif" width="14" /></td>
    <td bgcolor="#99ccff" class="cardtitle" height="14"  width="86">选项卡二</td></tr></table></div>
 
 
<div id="menu3" onmouseout="menuBack(3)" onmouseover="menuOut(3)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 40px; WIDTH: 130px; Z-INDEX: 1">
<div class="cardbottom" id="Layer3" style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<table align="center" border="0"  width="75">
  
  <tr>
    <td class="td1">选项一</td></tr>
  <tr>
    <td class="td1">选项二</td></tr>
  <tr>
    <td class="td1">选项三</td></tr>
  <tr>
    <td class="td1">选项四</td></tr>
  <tr>
    <td>&nbsp;</td></tr></table></div>
<table border="0" cellpadding="0" cellspacing="0" width="100">
 
  <tr>
    <td height="18" width="14"><img alt="" height="18" src="../images/BookCorner.gif" width="14" /></td>
    <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡三</td></tr></table></div>
 
 
<div id="menu4" onmouseout="menuBack(4)" onmouseover="menuOut(4)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 60px; WIDTH: 130px; Z-INDEX: 1">
<div class="cardbottom" id="Layer4" style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<table align="center" border="0"  width="75">
 
  <tr>
    <td class="td1">选项一</td></tr>
  <tr>
    <td class="td1">选项二</td></tr>
  <tr>
    <td class="td1">选项三</td></tr>
  <tr>
    <td class="td1">选项四</td></tr>
  <tr>
    <td>&nbsp;</td></tr></table></div>
<table border="0" cellpadding="0" cellspacing="0" width="100">
 
  <tr>
    <td height="18" width="14"><img alt="" height="18" src="../images/BookCorner.gif" width="14" /></td>
    <td bgcolor="#99ccff" class="cardtitle" height="14"  width="86">选项卡四</td></tr></table></div>
 
 
<div id="menu5" onmouseout="menuBack(5)" onmouseover="menuOut(5)" style="HEIGHT: 134px; LEFT: 30px; POSITION: absolute; TOP: 80px; WIDTH: 130px; Z-INDEX: 1">
<div class="cardbottom" id="Layer5" style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<table align="center" border="0"  width="75">
 
  <tr>
    <td class="style1">选项一</td></tr>
  <tr>
    <td class="td1">选项二</td></tr>
  <tr>
    <td class="td1">选项三</td></tr>
  <tr>
    <td class="td1">选项四</td></tr>
  <tr>
    <td>&nbsp;</td></tr></table></div>
<table border="0" cellpadding="0" cellspacing="0" width="100">
  
  <tr>
    <td height="18" width="14"><img alt=""  height="18" src="../images/BookCorner.gif" width="14" /></td>
    <td bgcolor="#99ccff" class="cardtitle" height="14"  width="86">选项卡五</td></tr></table></div>
 
 
</div>
</body>
模版代码    <div style="position: relative; width: 1000px;height:700px;  ">
        <div style="position: relative; width:150px; height:100%;  float:left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
                
                <uc1:BookCornerControl ID="BookCornerControl1" runat="server" />
                
            </asp:ContentPlaceHolder>
        </div>
       <div style="position: relative; width: 849px; height:100%; background-image: url('images/yw/yw03.png');
        background-repeat: no-repeat;  text-align:left;float:left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
            </asp:ContentPlaceHolder>
        </div>

解决方案 »

  1.   

    <div class="maskl" id="menuPos" style="HEIGHT: 216px; LEFT: 90px; POSITION:relative; TOP: 59px; WIDTH: 132px; Z-INDEX: 1">这里不需要top和left把<div id="menu1" onmouseout="menuBack(1)" onmouseover="menuOut(1)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1">
    <div class="cardbottom" id="Layer1" style="HEIGHT: 115px; WIDTH: 100px; LEFT: 0px; POSITION: absolute; TOP: 17px; Z-INDEX: 1">
    这两个div都POSITION: absolute;？  第二个不需要把可以padding或margin  <div style="position: relative; width: 849px; height:100%; background-image: url('images/yw/yw03.png');
      background-repeat: no-repeat; text-align:left;float:left">
    <div style="POSITION: absolute;这里定位下试试">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
      </asp:ContentPlaceHolder>
    </div>
      </div>
      

  2.   

    pengwen420107谢谢啊！！！解决了