cssの位置付けは何ですか？ CSS の配置の概要

この記事でわかることは、CSS の位​​置付けとは何でしょうか? CSS の配置についての概要は、参考にしていただければ幸いです。

配置は次のように分類されます:

static (デフォルト): これは、ページ要素のposition属性のデフォルト値です。要素はブラウザの要素の配置ルールに従って配置されます。ウェブページで。

注: この時点で要素に left、right、top、bottom を設定しても効果はありません。

relative (相対配置): 元の位置を基準にして配置します。以前に位置が設定されていない場合、または位置の値が静的な場合、相対を設定した後、要素の左、右、上、下の位置は元の位置を基準にして移動されます。

absolute (絶対的な位置決め):

これは誰もがよく知っているはずです。つまり、文書の流れから切り離された位置決めです。位置決め参照オブジェクトはそれ自身の親ですが、その自身の親には位置属性が必要です (親の位置属性が静的である場合は機能しません。絶対、相対、固定のいずれかである必要があります)。その親がposition属性を設定していない場合、body要素まで、position属性を持ち、静的ではない祖先要素を上方に検索します。

fixed (固定位置):

この属性は、ブラウザ ウィンドウに対して相対的に 要素を配置するために使用されます。また、スライダーはブラウザ ウィンドウに対して固定位置に固定されます。その兄弟要素は配置時にそれを無視することに注意してください。このときの上下左右もブラウザウィンドウを基準とした相対値となります。 以下に私の考えを共有させてください:

1. 古い IE6 はブラウザに相対的に配置されているため、互換性の問題が発生する可能性があります。

2. 親要素に位置属性 (静的ではない) とパディング値がある場合、子要素に絶対値のみが設定されている場合、親要素のパディング値は無視されません。設定すると、親要素のパディング値は無視されます。

3. 絶対属性を持つ要素の水平方向のセンタリング方法を共有します:

方法 1: 通常は left: 50% を使用し、次に margin-left: -width/2 を使用して水平方向のセンタリングを設定します。 . 方法としては、面接で横芯出しの方法を聞かれた場合は以下の方法で加点できます！

方法 2: 子要素を left: 0、right: 0 に設定し、margin: 0 auto を設定して水平方向の中央揃えにします。

4. ポジションを設定した後のフロートとマージンの変化に注意してください。これは非常に重要なので、後で説明します。

関連する推奨事項:

CSS3 アニメーション属性: 変換属性の概要

CSS3 の疑似要素によってバブル ボックスを実装するコード (前、後)

以上がcssの位置付けは何ですか？ CSS の配置の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。