gorogoronyan FC2

CSS position: fixed;

概略

position: fixed; はページのスクロールに関係なく 固定の位置に部品を表示したいときに使います。 画面中央にダイアログを表示したり 固定メニューを表示したりする用途に使えます。

ダイアログを表示する場合は、近年、dialog タグがあります。
HTML: dialog タグ

position: fixed; のサンプル (2023/07)

ウインドの中央に表示する (2023/07)

前置きで、dialog タグでモーダルダイアログ表示すると 自動的にウインドの中央に表示されます。 position: fixed; などの CSS 設定が不要になります。
HTML dialog タグ

TestJS_dialog_form_img01.html
dialog タグのモーダルダイアログ表示で img 画像をウインドの中央に表示する。
img タグ: JavaScript サンプル

div などのブロック要素をウインドの中央に表示する場合は inset: 0; と margin: auto; を使うと簡単にセンタリングできます。
CSS: 要素の配置: 左右中央, 上下中央

TestCSS_position_fixed_center01.html
固定サイズの div をウインドの中央に表示する。
TestCSS_position_fixed_center02.html
ウインドの大きさに連動してサイズが変わる div をウインドの中央に表示する。

いろいろ

TestCSS_position_fixed01.html
昔の変り種のサンプル。 table を固定表示して定規代わりにする。 画像はウインドをスクロールすると移動する。
tableを使った定規のサンプル

固定のメニューやツールパレットの表示など

TestCSS_fixed_div_popup02.html
ツールパレットをウインド右側にポップアップ表示
HTML fieldset タグ, legend タグ
div の表示・非表示のサンプル
TestCSS_fixed_nav_popup02.html
ウインド幅が狭いときに目次をボタン化してポップアップ表示するサンプル。
HTML ページレイアウト

JavaScript

TestJS_mouse_event01.html
マウスイベントのサンプル。マウスの座標値を fixed で表示。
JavaScript: マウスイベント処理

関連

inserted by FC2 system