html table td 中 使用相对定位(relative)和绝对定位(absolute)的div
2015-09-12 16:37
633 查看
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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angular绑定数据时转义html标签
- 一种提取HTML网页正文的方法
- html pre标签使文本自动换行
- html自定义标签属性的例子
- TextView 显示html文本
- 都div在所有li的html()值被设置"哈哈"，当点击设置"我被点击",其余的还是不点击设置“哈哈”
- Ubuntu14.04 LTS下安装pdf2htmlEX
- 飘雪作业——index.html
- 7.html中的表单元素一
- HTML表单练习~百度注册
- HTML的<meta />标签
- html cheatsheet
- 用程序实现自动的html操作
- html标签页图标
- 8，了解HTML的代码注释
- 6，认识html中的head标签
- 分离 结构 表现和行为
- 练习一html注册页面输入验证
- html笔记
- 关于html 定位 z-index 覆盖问题