Framerのポジションについて

Dec 8, 2024

Dec 8, 2024

positionパネル

右側のpositionパネルは、選択したフレームが親フレームからの位置を表しています。



ポジションのタイプ

positionパネルのTypeには、以下の4つがあります。

  1. Absolute(絶対位置)

  2. Relative(相対位置)

  3. Fixed(固定)

  4. Sticky(追従)



Absolute(絶対位置)

親フレームの中で自由に配置できます。親要素がStackやGrid以外だとデフォルトはAbsoluteになっています。他の要素の流れ(通常のレイアウト)に影響されないため、重ねて配置したい場合に最適です。



Relative(相対位置)

レイアウトの基本となる設定です。親フレーム内で上から下に向かって積み木のように組まれていきます。StackまたはGridにした際の子要素のデフォルト値です。位置はコンテンツの流れによって決定されます。



Fixed(固定)

ビューポート内の(ウィンドウ)の同じ位置に固定され続けます。スクロールしても常にその位置に表示され続けます。画面上部のナビゲーション、トップへ戻るボタン、お問い合わせボタンなど使い方は様々です。



Sticky(追従)

通常はRelative(相対)と同じ挙動で配置されますが、スクロール途中に要素がビューポート内に入ると「指定されたスクロール位置で固定される」という特徴を持ちます。 親要素の範囲内でのみ固定され、親要素を超えると再びスクロールに従います。親要素に対して上下左右、ピクセル数値で指定できます。



※親フレームのオーバーフロー設定がVisibleになっていないとStickyが機能しないので要注意です。

Stickyに設定するとこのような↓表示が出ます。



親フレームのStylesのOverflowを「Visible」に設定してください。

(Stickyにしたいフレームを囲っているすべての親フレームでその設定が必要です)



Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Pro Plan 25% discount code

English