CSS 位置 定位_html/css_WEB-ITnose

Position

CSS の位​​置決めプロパティを使用すると、要素を配置できます。また、ある要素を別の要素の後ろに配置し、ある要素のコンテンツが大きすぎる場合に何が起こるかを指定することもできます。

要素は、top、bottom、left、right 属性を使用して配置できます。ただし、これらのプロパティは、position プロパティが最初に設定されない限り機能しません。また、位置決め方法に応じて、動作方法も異なります。

4 つの異なる位置決め方法があります。

1. 静的配置
2. 固定配置
3. 相対配置
4. 絶対配置

静的配置

HTML要素のデフォルト値、つまり配置なし、要素は通常の流れが入ります。

静的に配置された要素は、上下左右の影響を受けません。

固定位置

要素の位置はブラウザ ウィンドウに対して固定されます。

ウィンドウがスクロールされても動きません:

DOCTYPE

オンラインで実行

注: 固定位置は IE7 および IE8 でのみサポートされている必要があります。

固定位置は位置を変更します。要素の内容はドキュメントと一致しており、ストリームに依存しないため、スペースを占有しません。

固定位置の要素は他の要素と重なります。

相対配置

相対的に配置された要素は、通常の位置を基準にして配置されます。

p.pos_fixed{    position:fixed;    top:30px;    right:5px;}

オンラインで実行

相対的に配置された要素や互いに重なり合う要素の内容は移動できますが、元の占有スペースは変わりません。

h2.pos_left{    position:relative;    left:-20px;}h2.pos_right{    position:relative;    left:20px;}

オンラインで実行

相対的に配置された要素は、絶対的に配置された要素のコンテナ ブロックとしてよく使用されます。

絶対配置

絶対配置された要素の位置は、最も近くに配置された親要素を基準としたものになります。要素に配置された親要素がない場合、その位置は :

h2.pos_top{    position:relative;    top:-50px;}

を基準とします。

オンラインで動作します

ドキュメントフローとは独立して要素を絶対的に配置するため、スペースを占有しません。

絶対的に配置された要素は他の要素と重複します。

要素の重なり

要素はドキュメント フローとは独立して配置されるため、ページ上の他の要素と重なることができます

z-index 属性は、要素の積み重ね順序 (どの要素が最初に来るか、または

要素には正または負の重なり順を指定できます:

h2{    position:absolute;    left:100px;    top:150px;}

オンラインで実行

重なり順が高い要素は常に、重なり順が低い要素より前に来ます。

注: 配置された 2 つの要素が重なっていて、z-index が指定されていない場合、HTML コード内で最後に配置された要素が一番上に表示されます。

その他の例

要素の形状をトリミングする

この例は、要素の形状を設定する方法を示します。要素がこの形状にクリップされて表示されます。

スクロール バーを使用して要素内のオーバーフロー コンテンツを表示する方法

この例では、オーバーフロー プロパティを使用してスクロール バーを作成し、要素のコンテンツが指定された領域に大きすぎる場合にスクロール バーを設定する方法を示します。

オーバーフローを自動的に処理するようにブラウザを設定する方法

この例では、オーバーフローを自動的に処理するようにブラウザを設定する方法を示します。

カーソルの変更

この例は、カーソルを変更する方法を示します。

すべての CSS 配置プロパティ

「CSS」列の数字は、プロパティを定義する CSS (CSS1 または CSS2) バージョンを示します。

プロパティ 説明 値 CSS

bottom	位置決めされた要素の下マージン境界と、その要素を含むブロックの下境界との間のオフセットを定義します。	auto length % inherit	2
clip	絶対位置の要素をクリップ	shape auto inherit	2
cursor	指定した型に移動するカーソルを表示	url auto クロスヘア default ポインタ move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
left	は、位置決めされた要素の左マージンの端と、その要素を含むブロックの左端の間のオフセットを定義します。	auto length % inherit	2
overflow	要素のコンテンツがその領域をオーバーフローした場合に何が起こるかを設定します。	auto hidden scroll visible inherit	2
position	要素の配置タイプを指定	absolute fixed relative static inherit	2
正しい	の定義位置決め 要素の右マージン端とその要素を含むブロックの右端の間のオフセット。	auto length % inherit	2
top	は、位置決めされた要素の上マージン境界とその要素を含むブロックの上境界の間のオフセットを定義します。	auto length % inherit	2
z-index	要素の重なり順を設定	number auto inherit	2

関連書籍:

CSS チュートリアル

CSSの概要

CSS構文

CSS IDとクラスセレクター

CSSスタイルの作成

CSSの背景背景の紹介

CSSテキストスタイル

CSSフォント

CSSリンク

CSSウルオルリストスタイル

CSS TABLE スタイル

CSS ボックスモデル

CSS ボーダー

CSS アウトラインのアウトライン

CSS マージン

CSS パディング

CSS グループ化およびネストセレクター

CSS 寸法 sion)

CSS 表示プロパティ

CSS 位置の配置

CSS Float フローティング

CSS 水平配置 (水平配置)

CSS 組み合わせセレクター

CSS 疑似要素

CSS ナビゲーションバー

CSS ドロップダウンメニュー

CSS 画像ギャラリー

CSS 画像透明/不透明

CSS sp儀式のイメージステッチングテクノロジー

CSSメディアタイプ

CSS属性セレクター

CSSインスタンス