CSS position: fixed;
概略
position: fixed; はページのスクロールに関係なく 固定の位置に部品を表示したいときに使います。 画面中央にダイアログを表示したり 固定メニューを表示したりする用途に使えます。
ダイアログを表示する場合は、近年、dialog タグがあります。
HTML: dialog タグ
position: fixed; のサンプル (2023/07)
- TestCSS_position_fixed02.html
header タグをページ上部に固定表示して スクロールしないようにするサンプル。
ウインドの中央に表示する (2023/07)
前置きで、dialog タグでモーダルダイアログ表示すると
自動的にウインドの中央に表示されます。
position: fixed; などの CSS 設定が不要になります。
HTML dialog タグ
dialog タグのモーダルダイアログ表示で img 画像をウインドの中央に表示する。
img タグ: JavaScript サンプル
div などのブロック要素をウインドの中央に表示する場合は
inset: 0; と margin: auto; を使うと簡単にセンタリングできます。
CSS: 要素の配置: 左右中央, 上下中央
固定サイズの div をウインドの中央に表示する。
TestCSS_position_fixed_center02.html
ウインドの大きさに連動してサイズが変わる div をウインドの中央に表示する。
いろいろ
TestCSS_position_fixed01.html昔の変り種のサンプル。 table を固定表示して定規代わりにする。 画像はウインドをスクロールすると移動する。
tableを使った定規のサンプル
固定のメニューやツールパレットの表示など
- TestCSS_fixed_nav_popup01.html
メニューをウインド上部にポップアップ表示。
ツールパレットをウインド右側にポップアップ表示
HTML fieldset タグ, legend タグ
div の表示・非表示のサンプル
TestCSS_fixed_nav_popup02.html
ウインド幅が狭いときに目次をボタン化してポップアップ表示するサンプル。
HTML ページレイアウト
JavaScript
TestJS_mouse_event01.htmlマウスイベントのサンプル。マウスの座標値を fixed で表示。
JavaScript: マウスイベント処理