HTML 要素の位置は、Web ページ コンポーネントを編成する上で重要な役割を果たします。具体的には、CSS「 位置 ' 財産。このプロパティは、上、左、右、下のプロパティなどのオフセット プロパティに関連付けることができ、ページ上の要素を調整するための特定の値を提供します。しかし ' 絶対の 」 配置された要素は、最も近い配置された要素に対して調整できます。
この投稿では、CSS の絶対配置について説明します。
CSS「位置」プロパティ
「 位置 CSS の ” プロパティを使用して、要素の位置を調整できます。 position プロパティのさまざまな値は、fixed、absolute、relative、static、および sticky です。これらの値は、要素の位置を調整するために、上、右、左、下などのオフセット プロパティで設定されます。
CSS絶対配置を適用する方法は?
要素の絶対配置は、CSS を使用して適用できます。 位置 ”値を持つプロパティ” 絶対の 」。絶対位置を持つ要素は、最も近い位置にある親要素に対応して調整されます。ただし、祖先が配置されていない場合は、ドキュメントの本文セクションに対して相対的に調整されます。
例
実際の例で概念を理解しましょう。
ステップ 1: HTML ファイルを作成する
HTML ファイルの body 要素内に、クラス名「 主要 」。次に、作成した div 内に、次の属性に関連付けられた HTML タグを追加します。
-
- 「 ソース 」は、画像へのリンクを提供します。
- 「 クラス 」は、要素のスタイルを設定するために CSS で使用されます。
- 「 すべての ” 属性は、画像がページに読み込まれなかった場合に画像の代わりに表示されるテキストを指定します。
- 「 すべての ” 属性は、画像がページに読み込まれなかった場合に画像の代わりにページに表示されるテキストを指定します。
次に、見出しと段落の h1 要素と p 要素を含む別の div を追加します。
< 分周 クラス = '主要' >< 分周 クラス = 'コンテンツ' >
< 画像 ソース = 「画像/linuxlogo.png」 クラス = '家' すべての = 「リナックスのロゴ」 幅 = 「80px」 >
< h1 > CSS 絶対配置 h1 >
< p > こんにちはLinuxhintチーム ! p >
分周 >
分周 >
CSS では、HTML 要素を装飾するためにいくつかのスタイル プロパティが使用されます。
ステップ 2: スタイル「すべて」の要素
* {font-family: Verdana、Geneva、Tahoma、sans-serif;
}
HTML 要素は、「 フォントファミリー ”値を持つプロパティ” ヴェルダナ、ジュネーブ、タホマ、サンセリフ 」。この値のリストにより、ブラウザーが最初のスタイルをサポートしていない場合に、他のスタイルが適用されることが保証されます。
ステップ 3: スタイル「ホーム」div
。家 {位置: 絶対;
上: 50px;
左: 45px;
}
以下は、「 家 」 div:
-
- 「 位置 ” プロパティは要素の位置を設定します。ここで、追加された「 絶対の 」は、HTML の body セクションを基準にして要素を配置します。
- 「 上 」プロパティは、要素の垂直方向の調整に利用されます。
- 「 左 」プロパティは、要素の水平方向の調整に使用されます。
ステップ 4: スタイル「コンテンツ」div
。コンテンツ {背景色: カデットブルー;
幅: 300px;
高さ: 250px;
パディング左: 40px;
左マージン: 80px;
}
以下は、「 コンテンツ 」 div:
-
- 「 背景色 」プロパティは、要素の背景色を設定します。
- 「 幅 ” プロパティは要素の幅を設定します。
- 「 身長 ” プロパティは要素の高さを設定します。
- 「 パディング左 ” プロパティは、要素のコンテンツの左側にスペースを追加するように設定されています。
- 「 左マージン ” プロパティは、要素の左側のスペースを指定します。
この時点で、Web ページは次のようになります。
上記の結果から、div ホームの画像がドキュメントの本文の上から 50 ピクセル、左から 45 ピクセルに配置されていることがわかります。さらに、ホーム div の位置は、HTML の body セクションに対して相対的に設定されます。
配置された親要素に対して要素の位置を「相対的に」調整する方法は?
このセクションでは、最も近い位置の親要素を基準にして要素の位置を調整する方法について説明します。
「content」divの「position」プロパティを設定
位置: 相対;
親要素に対する要素の位置を調整するには、「 位置 ”親要素のプロパティを” 相対的 ' 価値。
「img」要素の「position」プロパティを設定
。家 {位置: 絶対;
上: 100px;
左: 220px;
}
ここに：
-
- 「 位置 値が「」に設定されたプロパティ 絶対の 」は、親要素に対して相対的に配置されます (つまり、コンテンツ div の位置は値 relative で設定されます)。
- 「 上 要素の上からの位置の設定には、”プロパティを利用します。
- 「 左 」プロパティは、要素の位置を左から設定するために利用されます。
出力
結果から、画像がその親 div に対して相対的に配置されていることがわかり、適切に見えます。
結論
CSS「 位置 」プロパティを使用して、HTML 要素の位置を設定します。このプロパティは、固定、相対、絶対、スティッキー、および静的として評価できます。 「 絶対の 」値は、近くに配置された親要素に対応する要素を配置します。この投稿では、CSS の絶対配置について、実際の例を挙げて説明しました。