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

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

DMM.com Labo 石橋啓太

DMM.com Labo デザイナー

!

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

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

!

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

!

最近AngularJSいじくってます。

石橋 啓太 ishibashi keita

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

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

あるある

かわいいアイツ

fixed

fixed

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

!

position: fixed;の中身

position: fixed;の中身

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

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

position: fixed;の中身

fixed

基準値：viewport

body

div

position: fixed;の中身

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

viewportってなんだっけ

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

PC

ウィンドウエリア＝viewport

viewportってなんだっけ

スマホ ウィンドウ……？

viewportってなんだっけ

visual viewport

layout viewport

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

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

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

!

スマホ

viewportってなんだっけ

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

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

以下の要素は要注意！

<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 !ありがとうございました。