absolute绝对定位的div放在td中,他的定位是相对于table的左上角。
relative相对定位的div放在td总共,他的定位是相对于本td的的左上角。
当把td设置成相对或者绝对定位,所有定位都正常了,也就是说在内层使用定位,外层必须也要使用定位。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- #apDiv1 { position:absolute; left:104px; top:40px; width:659px; height:168px; z-index:1; text-align: center; } #apDiv1 .post { position: absolute; height: 100px; width: 100px; background-color: #00FF00; left: 10px; top: 10px; } #apDiv1 .rel { position: relative; height: 100px; width: 100px; left: 10px; top: 10px; background-color: #00FFFF; } * { margin: 0px; padding: 0px; } --> </style> </head> <body> <div id="apDiv1"> <table width="518" height="149" border="1"> <tr> <td width="161"> </td> <td width="125"> </td> <td width="168"> </td> <td width="36"> </td> </tr> <tr> <td></td> <td><div class="post">绝对定位</div></td> <td> </td> <td><div class="rel">相对定位</div></td> </tr> </table> </div> </body></html>
相关资源:敏捷开发V1.0.pptx