fixed positioned box

position: fixed

'position: fixed' (CSS)

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

仕様書

処理モデル

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

CSS 2.1

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

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

互換性

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

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

歴史

[1] Position Fixed Behavior for Internet Explorer 5+ ( 版) <http://www.minc.ne.jp/~konda/web_resoce/js/behavior/pos-fixed.html>

[7] Loosely - Androidのposition:fixed;とz-indexのバグ? ( ( 版)) <http://loosely.net/archives/82>

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

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

[10] background-attachment: fixed がスマホで効かない問題は ::before で解決! | *Web Design 覚え書き* ( 版) <http://webdesign.practice.jp/background-fixed-ios>

[11] URL Bar Resizing  |  Web  |  Google Developers () <https://developers.google.com/web/updates/2016/12/url-bar-resizing?utm_source=feed&utm_medium=feed&u>