'position: fixed'
(CSS)[3] CSS の 'position'
特性の値
'fixed'
は、箱を固定配置することを表します。
[4] 箱の位置は 'position: absolute'
の場合と同じように計算しますが、
固定配置の場合、何らかの参照物に対して固定されます。
handheld
, projection
,
screen
, tty
, tv
の場合、
箱は viewport に対して固定され、スクロールによって移動しません。print
の場合、箱は各頁にレンダリングされ、
頁箱に対して固定されます。これは頁が (印刷プレビューなどで)
viewport を介して表示される場合であってもです。[5] 'position': 'absolute'
の場合同様、
余白は他の余白と結合されません。
CSS 2.1
[6] 利用者エージェントは固定された箱の内容を頁化してはなりません。 利用者エージェントは見えない部分を他の方法で印刷して構いません。 CSS 2.1
[12] 特定サイズ以上の viewport を仮定して position: fixed
を使っているため、
小さ目の画面で表示すると下や右が切れてしまう Webページも少なくありません。
著者は特定の画面サイズを想定するべきではありません。
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>