gorogoronyan FC2

CSS position: absolute;

position: absolute; のサンプル

TestCSS_position_absolute_div01.html
親要素に対してブロック要素を絶対座標で配置する。
TestCSS_absolute_centering01.html
position でブロック要素を上下左右中央に配置するサンプル。
CSS: 要素の配置: 左右中央, 上下中央
TestCSS_draw02.html
画像と div の枠やテキストを重ねる。
position: absolute; で画像を重ねる
TestCSS_draw3_1.html
HTML で図表を作成する。ドローソフトの代用です。 div で構成し、absolute で配置します。
HTML をドローソフト代わりに使う (1)
単純な図は absolute よりも flex を使った方が簡単です。
TestCSS_draw3_2flex.html
flex のサンプル。 CSS: flex
TestCSS_position_absolute02.html
画像の上に半透明の table を配置して定規代わり。
table を使った定規のサンプル

JavaScript サンプル (2024/01)

TestJS_draggable_img01.html
absolute で配置した img 画像をドラッグ操作で移動するサンプル。 HTML の draggable 属性を使用します。
JavaScript: draggable 属性でドラッグ操作する
TestJS_div_display02.html
ボタンを押すと div を表示・非表示する。
absolute で指定した位置に div を重ねて表示する。
CSS: 要素の表示・非表示
div タグ: JavaScript サンプル

参考で、画面中央にダイアログを表示する場合は dialog タグを使うと簡単です。absolute を使わなくても表示できます。

その他

関連

inserted by FC2 system