8th
Framer Advent Calendar

Framerのポジションについて

目次

目次

目次

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にしたいフレームを囲っているすべての親フレームでその設定が必要です)


Please post what you learned from this calendar on X with a hashtag!

What you learned from this calendar,

\ please post it on X with a hashtag! /

Back to calendar

Back to calendar

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English