html table td 中 使用相对定位(relative)和绝对定位(absolute)的div

简介: absolute绝对定位的div放在td中,他的定位是相对于table的左上角。 relative相对定位的div放在td总共,他的定位是相对于本td的的左上角。 当把td设置成相对或者绝对定位,所有定位都正常了,也就是说在内层使用定位,外层必须也要使用定位。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional


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">&nbsp;</td>
      <td width="125">&nbsp;</td>
      <td width="168">&nbsp;</td>
      <td width="36">&nbsp;</td>
    </tr>
    <tr>
      <td></td>
      <td><div class="post">绝对定位</div></td>
      <td>&nbsp;</td>
      <td><div class="rel">相对定位</div></td>
    </tr>
  </table>
</div>
</body>

</html>


目录
相关文章
|
4月前
|
移动开发 搜索推荐 定位技术
HTML地理定位
HTML地理定位
39 0
|
4月前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
4月前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
41 0
|
4月前
HTML中tr、th和td
HTML中tr、th和td
|
23天前
|
移动开发 搜索推荐 开发者
HTML5结构元素深解语义化 div、section、article
HTML5结构元素深解语义化 div、section、article
|
2月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
104 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
2月前
|
XML 数据采集 机器学习/深度学习
使用 XPath 定位 HTML 中的 img 标签
使用 XPath 定位 HTML 中的 img 标签
|
3月前
|
前端开发 容器
HTML <div> 和<span>
【6月更文挑战第2天】HTML <div> 和<span>。
28 5
|
3月前
|
前端开发 开发者 SEO
HTML基础标签解析:H1-H6、DIV与P的正确使用方法
HTML基础标签解析:H1-H6、DIV与P的正确使用方法
|
4月前
|
前端开发 容器
HTML <div> 和<span>
HTML <div> 和<span>