table系タグのposition:relative

結構はまった。

tableのtdタグに、position:relative; をつけて、その中にposition:absolute を使おうとしたら、Firefoxでは全然違うところに配置された。

具体的なコードは以下の通り

<html>
<head>
<meta charset="UTF-8"/>
<title>relative test</title>
<style type="text/css">
.outerDiv
{
	width:300px;
	height:150px;	
	background-color:#EEEEEE;
	position:relative;
}
table
{
	background-color:#FFFFFF;
}
table td
{
	height:80px;
	width:100px;
	position:relative;
}
table td .rightup
{
	position:absolute;
	top:0px;
	right:0px;
}
</style>
</head>
<body>
 <div class="outerDiv">
  テーブルテスト
   <table caption="テーブルテスト" border="1">
    <tr><th>Firefox</th><td> <span class="rightup">右上</span>無効</td></tr>
   </table>
  </div>
</body>
</html>

<html>

<head>

<title>relative test</title>

.outerDiv

{

width:300px;

height:150px;

background-color:#EEEEEE;

position:relative;

}

table

{

background-color:#FFFFFF;

}

table td

{

height:80px;

width:100px;

position:relative;

}

table td .rightup

{

position:absolute;

top:0px;

right:0px;

}

</style>

</head>

<body>

テーブルテスト

<tr><th>Firefox</th><td> <span class="rightup">右上</span>無効</td></tr>

</table>

</div>

</body>

</html>

そして、こちらがIE(Chromeもほぼ同じ)の結果

こちらが、Firefoxでの結果

Firefoxでは、position:relativeは効いているのだが、tableのtdタグのposition:relativeは無視されている。

ちなみに、これはFirefoxのバグではなく、Firefoxが正しい実装である。

The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

引用元：http://www.w3.org/TR/CSS2/visuren.html#block-boxes

なので、正しい実装としては、tdの中でdivタグのブロックレベルタグで囲んでdivタグにposition:relativeを使うようにしなければならないらしい。

分かった後で、”position:relative firefox 効かない” で検索すると同じようにはまった人がちらほら。Androidも効かないものがあるらしい。Chromeは効くのにね・・・。

Leave a Reply Cancel Reply