<html>
<head>
<title>DIV实现简易漂浮层：固定分页和操作按钮在页面位置 </title>
</head>
<style>
table, th, td
{
border: 1px solid blue;
border-collapse:collapse;
}
div2{
position:absolute;
left:20px;
top:60%;
height:50px;
width:350px;
}
div1{
position:absolute;
right:35%;
top:60%;
height:50px;
width:150px;
}
</style>
<body>
<div>
外层DIV顶部
外层DIV第一行
外层DIV第二行
外层DIV第三行
<div>内层DIV宽度1600px/高度400px
<table>
<th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th>
<tr><td>字段值</td><td>字段值</td><td>字段值</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
外层DIV底部
外层DIV底部
外层DIV底部
外层DIV底部
外层DIV底部
外层DIV底部
外层DIV底部
外层DIV底部
<div>
<table>
<tr><td>
<input id="add_btn" type="button" value="上页">
<input id="back_btn" type="button" value="下页" />
<input id="add_btn" type="button" value="首页">
<input id="back_btn" type="button" value="尾页" />
</td></tr>
</table>
</div>
<div>
<table>
<tr><td>
<input id="add_btn" type="button" value="新 增">
<input id="back_btn" type="button" value="返 回" />
</td></tr>
</table>
</div>
</div>
</body>
</html>
效果图如下：<IMG alt=DIV实现简易漂浮层放置分页信息 src="http://img.my.csdn.net/uploads/201304/14/1365929367_3595.png">
【DIV实现简易漂浮层放置分页信息思路分享】相关文章：