Edit

Page

Page title:

Page body:

* [CODE(CSS)@en['position: fixed']] (CSS)

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

** 仕様書

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

** 処理モデル

[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]] 版) <http://www.minc.ne.jp/~konda/web_resoce/js/behavior/pos-fixed.html>

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

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

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

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

[11] [CITE@en[URL Bar Resizing  |  Web  |  Google Developers]]
([TIME[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>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)