GemPagesで要素の位置を設定する方法

Web デザインにおける「要素の位置」とはどういう意味ですか?

ウェブデザインでは、 要素の位置 オブジェクト（ボタン、画像、テキストブロックなど）が、そのオブジェクトの位置に対して相対的にどこに表示されるかを指します。 親コンテナ または 全体的なレイアウトさまざまな配置タイプの仕組みを理解することで、柔軟でピクセルパーフェクトなデザインを構築できるようになります。

具体的な例を挙げますと、以下の通りです。
ボタンは の項目に表示されます。 中に 行 その列内で移動できますが、高度な配置が適用されない限り、コンテナー内でのみ移動できます。.

GemPagesで要素の位置を設定する方法

• マージン: 要素を移動し、間隔を維持するために近くの要素もシフトします。
• 役職: 他の要素の位置に影響を与えずに要素を移動します。

それぞれのケースの例を以下に示します。

方法1: 余白を使用して要素の位置を調整する

マージンは、GemPages で要素の位置を変更する最も簡単な方法です。要素の周囲にスペースを作成し、周囲のコンテンツのフローに影響を与えます。

ステップ1： 位置を変更したい要素をクリックします。

ステップ2： 設定サイドバーで、 高機能 タブには何も表示されないことに注意してください。

ステップ3: 余白を調整する in 間隔： 

• 　 プラスマージン 要素の周囲にスペースを追加します。
• 　 マイナスマージン ユニークなデザインを実現するために、要素をコンテナの境界外に配置します。

あなたが設定した場合 マイナス上マージンすると、要素が上に移動し、その下の要素も上に移動して隙間を埋めます。

マージンに関する詳細なガイドについては、 余白設定 論文。

方法2: Positionプロパティを使用して要素の位置を設定する

より高度なレイアウト制御を行うには、 位置設定この方法を使用すると、他の要素に影響を与えずに要素を配置でき、スクロールやサイズ変更時のレイアウト動作を細かく制御できます。

要素の位置設定を編集する方法は次のとおりです。

ステップ1： 位置を変更したい要素をクリックします。

ステップ2： に行く 上級者 タブをクリックして、 役職 セクション： 

次のオプションのいずれかを選択します。

• 静的:
  • デフォルト設定。要素はページの通常のフローに従います。
  • カスタム位置調整は許可されません。
• 相対:
  • 要素を元の位置を基準に移動させます。
  • カスタム値を調整する Top, 右派, ボトムまたは 左派 配置を移動します。
• 絶対の:
  • 要素を、最も近い位置にある祖先 (行やセクションなど) を基準にして配置します。
  • 　 Top, 右派, ボトム, 左派 要素を、それを含む要素内の希望する場所に正確に配置します。
• 一定:
  • 要素をビューポートに対して固定された位置に保持します。
  • スクロール中に表示されたままになる固定ヘッダーやフローティング ボタンに最適です。
• スティッキー:
  • 相対的な位置決めと固定的な位置決めのハイブリッドとして機能します。
  • 要素は次のように動作します 相対 特定のスクロール位置に到達するまで、 固定の.