html - 親ノードの上部に相対的にボタンを配置します

Question

画像を含むはずのテーブルがあります。画像をハウリングするときに、テーブル セルの上部にコントロール ボタンを表示したい。

<table id="pridat_fotky">
    <tbody>
        <tr>
            <td class="empty">
                <button>X</button>
            </td>
        </tr>
    </tbody>
</table>

だから、私が試したのは、テーブルセルposition:relativeにposition:absoluteボタンを付けることです：

table#pridat_fotky td {
  position: relative;
}
/**THE BUTTON**/
table td button {
  position: absolute;
  top: 0px;   /*0 means as hight as possible within the cell???*/
  left: 50%;  /**MIDDLE ALIGMENT???*/
}

残念ながら、この設定では、ボタンがウィンドウの上部に配置されます。ここにフィドルがあります。ボタンは小さな赤い四角です。

ここでの作業ソリューション。

Answer 1

次のように、テーブル セルのコンテンツの周りにブロック レベル要素を追加する必要があります。

<td class="empty">
    <div><button>X</button></div>
</td>

CSS に次のルールを追加します。

table#pridat_fotky td div {
    /**TO MAKE THE BUTTON APPEAR RELATIVE?**/
    position: relative;
    height: 100%;
}

position: relative表のセルでは無効ですが、表のセル内のブロック レベルの要素では有効です。

また、div がテーブル セルを埋めるように設定height: 100%する必要があります。これにより、配置がうまく機能します。

デモを参照してください: http://jsfiddle.net/audetwebdesign/k9fWN/

注:divボタンを配置するすべてのテーブル セルにラッパーを追加する必要があります。

Answer 2

CSS に構文エラーがあります。17 行目で、「:」がありません (左 50%;)