インナーボタン：absolute`はテーブル

Question

Htmlの外に配置されます。

<br/><br/><br/><br/><br/> 

<table> 
<tr> 
    <td class="container"> 
     <button class="del">delete</button> 
    </td> 
</tr> 
</table> 

<br/><br/><br/><br/><br/> 

<div class="container"> 
<button class="del">delete</button> 
</div>​ 

のCss：div内のボタンは右上に配置されますなぜ

.container { 
    position: relative; 
    border: 1px solid red; 
    height: 50px; 
    width: 200px; 
} 

.del { 
    position: absolute; 
    top: 3px; 
    right: 3px; 
}​ 

div、しかしtdの中の1つはテーブルの外に置かれますか？

修正方法？私はそれがtable-cellあるtdの表示スタイル、とは何かを持っていると思うhttp://jsfiddle.net/Freewind/d6Tug/

Answer 1

：

は、アクティブなデモを参照してください。 display:blockに設定すると正しく動作します。

display:blockを.containerスタイルに追加するだけです。

フリーワードが指摘しているように、通常はtdが行内に表示されているため、ブラウザでサポートされている場合はinline-blockを使用する方がよいでしょう。

Answer 2

要素を付与すると、position:absolute;は、それを含む要素に対して相対的に配置されます。ブロック。テーブルセルは（divとは異なり）ブロックコンテナと見なされないため、ドキュメント本体自体に対して相対的に配置されます。 top:3px;はドキュメントの上端から3pxを持ち、right:3px;は右端から3px移動します。 `td`、block`は`行全体を保持td`行いますので、 ``インラインblock`は、優れているために

http://reference.sitepoint.com/css/position