CSS ポジショニング構文適用の詳細な説明-CSSチュートリアル-php.cn

CSS ポジショニング構文適用の詳細な説明

黄舟

リリース： 2016-12-15 13:50:22

オリジナル

1298 人が閲覧しました

1. CSS の位置: 位置

構文:

位置: static | 固定相対

値:

static: デフォルト値。特別な配置はなく、オブジェクトは HTML の配置ルールに従います。

絶対: オブジェクトをドキュメントフローの外にドラッグし、左、右、上、下、その他の属性を使用して、最も多くの位置設定を備えた最も近い親オブジェクトを基準とした絶対位置を実行します。そのような親オブジェクトが存在しない場合は、body オブジェクトが使用されます。そして、そのカスケードは z-index 属性を通じて定義されます。

修正済み：サポートされていません。オブジェクトの位置決めは絶対方式に従います。しかし、従うべき規範がいくつかあります。

relative: オブジェクトは積み重ねることはできませんが、左、右、上、下、その他のプロパティに基づいて通常のドキュメントフロー内でオフセットされます。

説明: オブジェクトの位置決めメソッドを取得します。

このプロパティ値を絶対値に設定すると、オブジェクトが通常のドキュメントフローの外にドラッグされ、周囲のコンテンツのレイアウトに関係なく、絶対的に配置されます。異なる Z インデックスプロパティを持つ他のオブジェクトがすでに特定の位置を占めている場合、それらは互いに影響を与えず、同じ位置で重なり合います。この時点では、オブジェクトには外側のパッチ (マージン) はありませんが、内側のパッチ (パディング) とボーダー (境界線) は存在します。

オブジェクトの絶対配置を有効にするには、左、右、上、下プロパティの少なくとも 1 つを指定し、このプロパティの値を絶対に設定する必要があります。それ以外の場合、上記のプロパティはデフォルト値の auto を使用し、オブジェクトは通常の HTML レイアウト規則に従い、前のオブジェクトの直後にレンダリングされます。

このプロパティ値を相対に設定すると、オブジェクトは通常の HTML フロー内に保持されますが、その位置は前のオブジェクトに基づいてオフセットされる可能性があります。相対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトの自然なスペースを上書きすることなく、独自のスペースを占有します。対照的に、絶対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトが通常のドキュメントフローからドラッグされるまで、その自然なスペースを占めます。絶対に配置されたオブジェクトを表示領域の外側に配置すると、スクロールバーが表示されます。ただし、相対的に配置されたオブジェクトが表示領域外に配置されている場合、スクロールバーは表示されません。

コンテンツのサイズは、レイアウトに応じてオブジェクトのサイズを決定します。たとえば、div オブジェクトの高さと位置のプロパティを設定すると、div オブジェクトの内容によって幅が決まります。

このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。対応するスクリプトプロパティは、position です。

例：

div {position:relative; top:-3px }

2. CSSの位置指定：Z-index

構文：

z-index:auto |number

値：

auto：デフォルト値。親オブジェクトの配置に従います
number : 単位のない整数値。負の数も可能です

説明:

オブジェクトの重なり順を取得または設定します。

より大きな数値を持つオブジェクトは、より小さな数値を持つオブジェクトの上に重ねられます。絶対的に配置された 2 つのオブジェクトがこの属性の数値が同じである場合、それらは HTML ドキュメント内で宣言された順序に従ってスタックされます。このプロパティが指定されていない絶対位置オブジェクトの場合、このプロパティに正の数値を持つオブジェクトはその上にあり、負の数値を持つオブジェクトは下にあります。パラメーターを null に設定すると、このプロパティが削除されます。

このプロパティは、位置プロパティの値が相対または絶対であるオブジェクトに対してのみ機能します。このプロパティは、オブジェクトの選択などのウィンドウコントロールには影響しません。 IE5.5 以降では、iframe オブジェクトがこの属性をサポートし始めます。以前のブラウザバージョンでは、iframe オブジェクトはウィンドウコントロールであり、このプロパティは無視されました。このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。対応するスクリプトプロパティは zIndex です。

例:

div {position:absolute; z-index:3; width:6px; }

3. CSS の位置指定: top

構文:

top : auto | length

value:デフォルト値。特別な配置はなく、HTML 配置ルールに従ってドキュメントフローに割り当てられます。

length : 浮動小数点数と単位識別子 | から構成される長さの値。この値を有効にするには、位置属性値を絶対または相対として定義する必要があります。

説明:

位置設定を使用して、最新の親オブジェクトの上端を基準としたオブジェクトの位置を取得または設定します。

このプロパティは、オブジェクトの位置プロパティが設定されている場合にのみ使用できます。それ以外の場合、このプロパティ設定は無視されます。このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。対応するスクリプト属性は top です。その値は文字列であるため、スクリプトでの計算には使用できません。スタイルオブジェクトのposTopやpixelTopなどの実行時プロパティや、オブジェクトのoffsetTopなどのプロパティを使用してください。

例:

以下は引用部分です:

div {position:relative; left:6px;

IV.そうです

文法:

右: auto | 長さ

値:

auto: デフォルト値。特別な配置はなく、HTML 配置ルールに従ってドキュメントフローに割り当てられます。

説明:

位置設定を使用して、最新の親オブジェクトの右側を基準としたオブジェクトの位置を取得または設定します。

このプロパティは、オブジェクトの位置プロパティが設定されている場合にのみ使用できます。それ以外の場合、このプロパティ設定は無視されます。このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。対応するスクリプト属性は right です。その値は文字列であるため、スクリプトでの計算には使用できません。スタイルオブジェクトのposRightやpixelRightなどのランタイムプロパティを使用してください。

例:

以下は引用部分です:
div {position:absolute; right:1in; }

5. CSS の配置: Bottom

構文:

Bottom: auto | length

値:

auto: デフォルト値。特別な配置はなく、HTML 配置ルールに従ってドキュメントフローに割り当てられます。

length: 浮動小数点数と単位識別子から構成される長さの値 | 。この値を有効にするには、位置属性値を絶対または相対として定義する必要があります。

説明:

位置設定を使用して、最新の親オブジェクトの下端を基準としたオブジェクトの位置を取得または設定します。このプロパティは、オブジェクトの位置プロパティが設定されている場合にのみ使用できます。それ以外の場合、このプロパティ設定は無視されます。このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。対応するスクリプトプロパティはbottomです。その値は文字列であるため、スクリプトでの計算には使用できません。スタイルオブジェクトのposBottomやpixelBottomなどのランタイムプロパティを使用してください。

例:

以下は引用部分です:

div {position:relative;bottom:6px; 6. CSS の位置指定: left

構文:

左: auto | length

値:

auto: デフォルト値。特別な配置はなく、HTML 配置ルールに従ってドキュメントフローに割り当てられます。

説明:

位置設定を使用して、最新の親オブジェクトの左を基準としたオブジェクトの位置を取得または設定します。

このプロパティは、オブジェクトのpositionプロパティが設定されている場合にのみ使用できます。それ以外の場合、このプロパティ設定は無視されます。このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。対応する script 属性は left です。その値は文字列であるため、スクリプトでの計算には使用できません。スタイルオブジェクトのposLeftやpixelLeftなどのランタイムプロパティや、オブジェクトのoffsetLeftなどのプロパティを使用してください。

例:

以下は引用部分です:

div {position:relative; left:6px; } CSS の位置決め構文の適用に関する詳細関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。