html - テーブルの右上にある CSS 位置アイコン

Question

私はCSSに比較的慣れていません。ページに幅が 70% の表があります。小さなアイコンをテーブルの右側のすぐ上に配置して、アイコンがその下のテーブルの右マージンに揃うようにする必要があります。どうすればこれを達成できますか？

一般的に、この質問は、CSS を使用して、ページ上の他の要素の位置に対して要素を相対的に配置する方法でしょうか?

ありがとう、カルビン

Answer 1

こんにちは、あなたはこれを簡単に行うことができます位置を投げてParent Position Relative、レイアウトに従って右上child to give position Absoluteに移動します

ライブデモ

http://jsfiddle.net/srgJh/

Answer 2

CSS では、次のように記述します。

.myclass {
    position:relative;
}

また

<img style="position:relative;" />

次に、「上」、「左」、「右」、「下」ステートメントで位置を制御できます。例：

<img src="position: relative; top: 20px;" />

Answer 3

<div style="position:relative;float:left;overflow:hidden">
<table>
...
</table>
<div class="icon"></div>
</div>

.icon {
position:absolute;
width:10px;
height:10px;
top:0;
right:0; 
}

アイコンをテーブルの外に置きたい場合は、マイナスで値を書き込みます。例：

top:-10px; /* above the table */
right:-10px; /* on the right side the table */

Answer 4

このcssを与えます：

.classname {
    position:relative;
}

問題が解決することを願っています

Answer 5

上記の人は質問に答えましたが、それがどのように機能するかを知りたい場合は、 http ：//www.tizag.com/cssT/position.phpを見てみてください。

また、ページ全体のレイアウトを作成するときは、テーブルの代わりにDivを使用することを検討する必要があります： http ：//www.tizag.com/htmlT/htmldiv.php