查看新闻/公告--[备忘]DIV相对定位与绝对定位

[心缘地方]同学录

首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版

登录系统:用户名: 密码: 如果要讨论问题，请先注册。

[备忘]DIV相对定位与绝对定位
上一篇:[备忘]一个小游戏的过关密码下一篇:[转]MySQL数据库索引的优缺点及使用时的注意事项
添加日期：2009/7/19 5:20:37	快速返回返回列表	阅读4490次
<!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> <title>div相对定位、绝对定位的嵌套效果</title> <style type="text/css"> body { margin: 30px; font-size: 9pt; } .a, .b, .c, .d, .e { width: 500px; height: 100px; margin: 5 auto; color: #fff; background: #000; } .aa, .bb, .cc, .dd, .ee { top: 10px; left: 10px; width: 10px; height: 10px; overflow: hidden; background: #F90; } .b, .d, .e { position: relative; } .cc, .dd, .ee { position: absolute; } </style> </head> <body> <form id="form1"> <div> <div class="a"> <div class="aa"> </div> A:均不设置postion，一般嵌套关系 </div> <div class="b"> <div class="bb"> </div> B:仅外div设置relative，一般嵌套关系 </div> <div class="c"> <div class="cc"> </div> C:仅内div设置absolute，文档中为嵌套关系，页面中内div浮起[非float]，相对于页面定位，与外div无关。 </div> <div class="d" style="background: #ff0000"> <div class="dd" style="margin-left:600px"> </div> <div class="dd" style="margin-left:800px"> </div> D:外div设置relative，内div设置absolute，内div浮起来并相对于外div定位 </div> <div class="d" style="background: #ff0000"> <div class="dd" style="position: relative;margin-left:600px"> </div> <div class="dd" style="position: relative;margin-left:800px"> </div> D:外div设置relative，内div设置relative，内div浮起来并相对于外div定位 </div> <div class="e"> <div class="ee" style="left: -10px;"> </div> E:这个是说明边界问题。-10 != 反向10px间距 </div> </div> </form> 外层Div用相对，内层用绝对（相对的话，div之间是折行的），这样内层飘起来，但是相对外Div定位。 <table border="1" cellspacing="0"> <tr><td style="width:200px;height:30px">aaaa</td> <td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td> <td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td> <td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td> </tr> <tr><td style="width:200px;height:30px">bbbb</td> <td colspan="30" style="height:30px" valign="middle"> <div style="width:100%;height:100%;background:yellow;position: relative"> <div style="width:500px;height:60%;background:skyblue;border:1px solid black;position: absolute;left:150px;z-index:999"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:30px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:150px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:270px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:360px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:500px;"></div> </div></td> </tr> <tr><td style="width:200px;height:30px">bbbb</td> <td colspan="30" style="height:30px" valign="middle"> <div style="width:100%;height:100%;background:yellow;position: relative"> <div style="width:300px;height:60%;background:skyblue;border:1px solid black;position: absolute;left:300px;z-index:999"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:30px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:150px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:270px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:360px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:500px;"></div> </div></td> </tr> <tr><td style="width:200px;height:30px">bbbb</td> <td colspan="30" style="height:30px" valign="middle"> <div style="width:100%;height:100%;background:yellow;position: relative"> <div style="width:320px;height:60%;background:skyblue;border:1px solid black;position: absolute;left:80px;z-index:999"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:30px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:150px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:270px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:360px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:500px;"></div> </div></td> </tr> <tr><td style="width:200px;height:30px">bbbb</td> <td colspan="30" style="height:30px" valign="middle"> <div style="width:100%;height:100%;background:yellow;position: relative"> <div style="width:200px;height:60%;background:skyblue;border:1px solid black;position: absolute;left:230px;z-index:999"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:30px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:150px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:270px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:360px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:500px;"></div> </div></td> </tr> <tr><td style="width:200px;height:30px">bbbb</td> <td colspan="30" style="height:30px" valign="middle"> <div style="width:100%;height:100%;background:yellow;position: relative"> <div style="width:130px;height:60%;background:skyblue;border:1px solid black;position: absolute;left:800px;z-index:999"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:30px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:150px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:270px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:360px;"></div> <div style="width:30px;height:100%;background:#eee;border-left:1px dashed #bbb;border-right:1px dashed #bbb;position: absolute;left:500px;"></div> </div></td> </tr> </table> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

评论 COMMENTS
没有评论 No Comments.

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码（不区分大小写） Validation Code: (not case sensitive)	看不清？点这里换一张！(Change it here!)
	评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.

CopyRight © 心缘地方 2005-2999. All Rights Reserved