`'position: fixed'` (CSS)

[3] CSS の 'position' 特性の値 'fixed' は、箱を固定配置することを表します。

仕様書

[2] CSS 2.1
- http://www.w3.org/TR/CSS21/visuren.html#propdef-position

処理モデル

[4] 箱の位置は 'position: absolute' の場合と同じように計算しますが、固定配置の場合、何らかの参照物に対して固定されます。

媒体が handheld, projection, screen, tty, tv の場合、箱は viewport に対して固定され、スクロールによって移動しません。
媒体が print の場合、箱は各頁にレンダリングされ、頁箱に対して固定されます。これは頁が (印刷プレビューなどで) viewport を介して表示される場合であってもです。
その他の媒体では、表現は未定義です。

CSS 2.1

[5] 'position': 'absolute' の場合同様、余白は他の余白と結合されません。 CSS 2.1

[6] 利用者エージェントは固定された箱の内容を頁化paginateしてはなりません。利用者エージェントは見えない部分を他の方法で印刷して構いません。 CSS 2.1

互換性

[12] 特定サイズ以上の viewport を仮定して position: fixed を使っているため、小さ目の画面で表示すると下や右が切れてしまう Webページも少なくありません。著者は特定の画面サイズを想定するべきではありません。 Webブラウザーは通常のスクロール以外の何らかの手段で利用者に隠れた部分を提供するべきです。

[13] 例えば position: fixed で viewport 外に隠れる面積が大きい時、その Webページの表示に限り縮小して表示するオプションを提示すると良いかもしれません。

歴史

[1] Position Fixed Behavior for Internet Explorer 5+ (2005-07-15 01:06:06 +09:00 版) http://www.minc.ne.jp/~konda/web_resoce/js/behavior/pos-fixed.html

[7] Loosely - Androidのposition:fixed;とz-indexのバグ? ( (2012-11-12 02:03:50 +09:00 版)) http://loosely.net/archives/82

[8] 2010-06-10 - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech ( (2012-11-12 02:04:45 +09:00 版)) http://subtech.g.hatena.ne.jp/cho45/20100610

[9] CSS - iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita ( (2014-02-14 05:12:38 +09:00 版)) http://qiita.com/HieroglypH/items/743781f0b87f66d071c5

[10] background-attachment: fixed がスマホで効かない問題は ::before で解決! | *Web Design 覚え書き* (2016-03-11 15:31:53 +09:00 版) http://webdesign.practice.jp/background-fixed-ios

[11] URL Bar Resizing | Web | Google Developers (2017-01-19 00:59:23 +09:00) https://developers.google.com/web/updates/2016/12/url-bar-resizing?utm_source=feed&utm_medium=feed&u

'position: fixed' (CSS)

仕様書

処理モデル

互換性

歴史

`'position: fixed'` (CSS)