スタイルパネルのポジションでエレメントの配置方法を自由に指定できます。

ポジションでは配置方法として設定できる値は次の3つです。

smartLPにおいて、エレメントはデフォルトで「相対位置」になっています。

「相対位置」はサイズの変更などに合わせてエレメント自体も変更してくれるのが特徴です。

以下のように、boxのサイズを変更しても自動で位置調整できます。

1つのエレメントを変更すると、他のエレメントも同じく変更されます。

想定位置で配置されたボックスは、方向・整列・配分ルールに従って他のボックスとの関係により相対的に配置されます。

固定したいエレメントに対してスタイルのfixedを選択すると、固定したエレメントはスクロールに影響されず、常に同じ位置に表示されます。

以下のように、ヘッダーに対してスタイルパネルのポジションをfixedに変更します。

次に右上のプレビューを押下するとブラウザにページ遷移します。ブラウザ上で確認するとスクロールしてもヘッダーが固定されます。

親エレメントを基準に、子エレメントに絶対配置を指定できます。

絶対配置を設定すると要素を重ねて配置できるなど、他のエレメントに影響されずに自由な配置やスタイル編集が可能です。

absoluteを使って位置調整する際は、親エレメントのポジションにrelative（もしくはfixed）を指定します。これを忘れると基準位置がずれて思うように表示されません。

relativeを親エレメントに適用することで、その親エレメントがabsoluteで動かす要素の基準になります。