CSS の配置

1.CSS の配置

配置の基本的な考え方はシンプルで、要素のボックスを通常の位置、または親要素、別の要素、またはブラウザ ウィンドウ自体に対して相対的に表示する場所を定義できます。

CSS には 3 つの基本的な位置決めメカニズムがあります:

通常のフロー:

HTML 内の位置順序に従って要素が配置されるプロセス

フローティング:

フローティング ボックスは左または右に配置できます。外側の端が、それを含むボックスまたは別のフローティング ボックスの境界線に触れます。

絶対配置:

絶対配置では、要素の位置がドキュメントの流れから独立するため、スペースを占有しません。これは、要素の位置が通常のフロー内の位置を基準とするため、実際には通常のフロー位置決めモデルの一部とみなされる相対位置決めとは異なります。

位置属性:

position、要素を静的、相対、絶対、または固定位置に配置します

top、left、right、bottomの4つの属性に値を割り当てることで、要素は次の位置に移動します対応する位置 方向オフセット

overflowは、要素がその領域をオーバーフローしたときに何が起こるかを設定します

clipは、主に画像に使用される要素の表示形状を設定します

vertical-alignは、要素の垂直方向の配置を設定します

z-index要素の重なり順を設定します

次に、position 属性に注目してみましょう: 画像のために、最初に HTML ファイルと CSS ファイルを作成します

html:

<div class="position1"></div>
<p>this is php中文网</p>
<p>this is php中文网</p>
<p>this is php中文网</p>
<p>this is php中文网</p>

CSS:

.position1{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
 
}

次に、通常のフローの効果:

CSS で相対位置の割り当てを追加するとき、左に 60px オフセットします

 position: relative;
 left: 60px;

次に見ていきます:

次に設定します位置を絶対値に設定します:

position: absolute;

効果は次のようになります:

比較することで、位置の 2 つの値の違いを理解できます。固定と静的です。要素を修正するには、画面をスクロールしても同じ場所に移動しません。静的な設定をした後は、オフセットは役に立ちません。

次に他のプロパティを見てみましょう

前にブロックを追加するときdiv: HTML

<div class="position1"></div>
<div class="position2"></div>

CSS 追加:

.position2{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position: relative;
    left:10px;
    top: 10px;
}

次の状況が表示されます:

次に、z-index を使用して、どの部分が前面にあるかを制御できます:

次に、交換する CSS ファイルを変更します。順序:

z-index: 2 をposition1 に追加;

z-index: 1;

をposition2 に追加して、交換効果を実現します: