本文主要是介绍html table td 中 使用相对定位(relative)和绝对定位(absolute)的div,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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>
这篇关于html table td 中 使用相对定位(relative)和绝对定位(absolute)的div的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!