* [CODE(CSS)@en['position: fixed']] (CSS) [3] [[CSS]] の [CODE(CSS)@en['[[position]]']] [[特性]]の値 [DFN[[CODE(CSS)@en['[[fixed]]']]]] は、[[箱]]を[[固定配置]]することを表します。 ** 仕様書 -[2] [[CSS 2.1]] -- ** 処理モデル [4] [[箱]]の位置は [CODE(CSS)@en['[[position]]: [[absolute]]']] の場合と同じように計算しますが、 [[固定配置]]の場合、何らかの参照物に対して[[固定]]されます。 - [[媒体]]が [CODE(CSS)@en[[[handheld]]]], [CODE(CSS)@en[[[projection]]]], [CODE(CSS)@en[[[screen]]]], [CODE(CSS)@en[[[tty]]]], [CODE(CSS)@en[[[tv]]]] の場合、 [[箱]]は [[viewport]] に対して固定され、[[スクロール]]によって移動しません。 - [[媒体]]が [CODE(CSS)@en[[[print]]]] の場合、[[箱]]は各頁に[[レンダリング]]され、 [[頁箱]]に対して[[固定]]されます。これは[[頁]]が ([[印刷プレビュー]]などで) [[viewport]] を介して表示される場合であってもです。 - その他の[[媒体]]では、[[表現]]は未定義です。 [SRC[[[CSS 2.1]]]] [5] [CODE(CSS)@en['[[position]]': '[[absolute]]']] の場合同様、 [[余白]]は他の[[余白]]と[[結合]]されません。 [SRC[[[CSS 2.1]]]] [6] [[利用者エージェント]]は[[固定]]された[[箱]]の[[内容]]を[RUBYB[[[頁化]]]@en[paginate]]しては[['''なりません''']]。 [[利用者エージェント]]は見えない部分を他の方法で[[印刷]]して構いません。 [SRC[[[CSS 2.1]]]] * 互換性 [12] 特定サイズ以上の [[viewport]] を仮定して [CODE[position: fixed]] を使っているため、 小さ目の[[画面]]で表示すると[[下]]や[[右]]が切れてしまう [[Webページ]]も少なくありません。 [[著者]]は特定の[[画面]]サイズを想定するべきではありません。 [[Webブラウザー]]は通常の[[スクロール]]以外の何らかの手段で[[利用者]]に隠れた部分を提供するべきです。 [EG[ [13] 例えば [CODE[position: fixed]] で [[viewport]] 外に隠れる[[面積]]が大きい時、 その [[Webページ]]の表示に限り[[縮小]]して表示するオプションを提示すると良いかもしれません。 ]EG] * 歴史 [1] [CITE@ja[Position Fixed Behavior for Internet Explorer 5+]] ([TIME[2005-07-15 01:06:06 +09:00]] 版) [7] [CITE[Loosely - Androidのposition:fixed;とz-indexのバグ?]] ( ([TIME[2012-11-12 02:03:50 +09:00]] 版)) [8] [CITE[2010-06-10 - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech]] ( ([TIME[2012-11-12 02:04:45 +09:00]] 版)) [9] [CITE[CSS - iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita]] ( ([TIME[2014-02-14 05:12:38 +09:00]] 版)) [10] [CITE@ja[background-attachment: fixed がスマホで効かない問題は ::before で解決! | *Web Design 覚え書き*]] ([TIME[2016-03-11 15:31:53 +09:00]] 版) [11] [CITE@en[URL Bar Resizing  |  Web  |  Google Developers]] ([TIME[2017-01-19 00:59:23 +09:00]])