天天看點

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;

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>

      <td></td>

      <td><div class="post">絕對定位</div></td>

      <td> </td>

      <td><div class="rel">相對定位</div></td>

  </table>

</div>

</body>

</html>

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