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.htmlHTML で図表を作成する。ドローソフトの代用です。 div で構成し、absolute で配置します。
HTML をドローソフト代わりに使う (1)
単純な図は absolute よりも flex を使った方が簡単です。
TestCSS_draw3_2flex.html
flex のサンプル。 CSS: flex
画像の上に半透明の table を配置して定規代わり。
table を使った定規のサンプル
JavaScript サンプル (2024/01)
TestJS_draggable_img01.htmlabsolute で配置した img 画像をドラッグ操作で移動するサンプル。 HTML の draggable 属性を使用します。
JavaScript: draggable 属性でドラッグ操作する
TestJS_div_display02.html
ボタンを押すと div を表示・非表示する。
absolute で指定した位置に div を重ねて表示する。
CSS: 要素の表示・非表示
div タグ: JavaScript サンプル
ボタンを押すと div を表示・非表示する。
absolute で指定した位置に div を重ねて表示する。
CSS: 要素の表示・非表示
div タグ: JavaScript サンプル
参考で、画面中央にダイアログを表示する場合は dialog
タグを使うと簡単です。absolute を使わなくても表示できます。
- TestJS_dialog_form_button01.html
dialog タグのサンプル。position: absolute; を使いません。
HTML: dialog タグ
その他
- TestCSS_position_absolute_table01.html
position: absolute を指定すると border の枠線が一部消えることがある。
background-clip: padding-box; を入れると枠線が表示される。