position: fixed;を上手に飼う方法

position: fixed;を上手に飼う方法2015.02.21 Frontrend Conference

DMM.com Labo 石橋啓太

DMM.com Labo デザイナー

!

昔はバナーとか作ってたけど、

フロントエンド技術に興味がでてきた人。

!

コーダーだったり、UI考えたり、アプリ作ったり。

!

最近AngularJSいじくってます。

石橋啓太 ishibashi keita

固定表示の実装でハマったことありますか？

固定表示の実装でハマったことありますか？

あるある

かわいいアイツ

fixed

fixed

自由自在に扱えるように fixedについてもっと知ろう！

!

position: fixed;の中身


absoluteと同じ絶対配置基準にするのはviewport

.red { position: fixed; left: 0; bottom: 0; width: 100%; }


fixed

基準値：viewport

body

div


やってること　大体おなじなーんだ。

viewportってなんだっけ

あー、知ってる知ってる。アレでしょ？アレ。

PC

ウィンドウエリア＝viewport


スマホウィンドウ……？


visual viewport

layout viewport

実際の表示領域（ズーム時含む）

metaタグによって設定される

ズームした時の挙動についてデバイス・OS毎に大きく異なるのでピンチイン許可する場合は要注意！

!

スマホ


上手に飼うにはどうすれば？


以下の要素は要注意！

<textarea> <input> <button> <select>

position（入れ子）

transform（ハードウェアアクセラレータ）

z-index

<input type=“text”>

<textarea>

<button>

fixed

中身もりもりの固定要素を丸ごと動かす！

これをtransformで動かしたい！例：

fixed

positionプロパティが入れ子状態で乱立！

例：

absolute

relative absolute

fixed

適当なz-index値の設定でおかしくなる

例：

<div>


formへのフォーカス

formからformへの移動

スクロール

ズーム

Javascript


固定する要素はシンプルに

デバイス独自の挙動を考慮する

他の要素の影響を受けやすい！大規模開発の際は慎重に実装しましょう！

THANK YOU !ありがとうございました。

Design