day 18-CSS-位置決めフロー

ポジショニングフロー
位置決めフロー分類
1.相対位置決めposition:relative

1️⃣標準ストリームから逸脱することなく、標準ストリームの空間

を占有する.

2️⃣Top left right bottomプロパティと組み合わせて使用するには、

が以前の標準ストリームの位置に対して移動します.

注意点

①同じ方向に相対的に位置する属性は1つしか使用できません.例えば、leftとright

を同時に使用できません.

②相対的な位置決めは、標準流から逸脱することなく、標準流において空間

を占有し続ける.

③相対位置決め区分ブロックレベル、行内、行内ブロックレベル要素

.

④相対位置決め設定margin、paddingなど、相対位置決め後の要素ではなく位置決め前の要素によく知られている---標準ストリームのレイアウト

に影響を及ぼす.

適用シーン

a.微調整要素---少ない

b.絶対位置決めに合わせて

を用いる.

2.絶対位置決めposition:absolute

はbodyに対して

を位置決めする.

注意点

1️⃣絶対位置は、フローティング

と同様に、標準フローから逸脱する

2️⃣絶対位置決めは、支店内、ブロックレベル、行内のブロックレベルを区別することなく、幅

を設けることができる.

3️⃣絶対位置決めtop left right bottomプロパティと組み合わせて

を使用する

絶対位置決め基準点はどのように選択しますか?

1️⃣デフォルトでは、すべての要素(祖先要素があるかどうかにかかわらず)はbodyを参照点

として使用されます.

2️⃣絶対位置決め要素に祖先要素がある場合、参照点は祖先要素であり、祖先要素も位置決めフロー(相対、絶対、固定、静的位置決めを除く)であってこそ、絶対位置決め参照点

を変更することができる.

3️⃣祖先要素であれば、参照点

を変更できます.

4️⃣1つの絶対位置要素には祖先要素があり、祖先要素には複数の位置ストリームがあり、この絶対位置は最近の位置ストリームの祖先要素を参照点として選択する--原則

に近い.

面接の注意点

1️⃣絶対位置決め要素がbodyを基準点とすると、画面がスクロールしていないページの幅と高さのみが基準点となり、ページ全体の高さと高さを基準点とする

ではない.

2️⃣絶対位置決め要素は、祖先要素のpadding

を無視します.

適用シーン

1️⃣微調整要素

2️⃣一般的には、絶対位置決めと相対位置決めの組み合わせ(子絶親相)---ナビゲーションバー

子絶父相

1️⃣相対位置決めのみを使用する場合、要素が移動する前の位置は依然として存在し、標準ストリームの空間を占有する---相対位置決め

を単独で使用することはできない.

2️⃣絶対位置決めのみを使用すると、表示される幅は常に最初に現れる幅で、ページ幅と高さが変化するとずれます.絶対位置決め

は単独では使用できません.

コツ:子絶親相は、ページ幅の高さがどのように変化しても変形しない

絶対位置の水平中央

margin:0 autuoは絶対位置決めで

失効する

高さ幅設定時に

パーセント設定可能

絶対位置決め要素left:50%を設定してから絶対位置決め要素のmargin-left:-要素幅の半分

を設定するだけです.

練習1:団体購入インタフェース

    
    
    


    

        ![](images/meat.jpg)
        
        
        
            54.9 ！  79          ，    WiFi。
    

練習2:フォーカスマップ---広告マルチキャスト

    
    
    


    

        ![](images/ad.jpg)
        <
        >
        

            
1
            
2
            
3
            
4
            
5
        
    

3.固定位置決め

1️⃣固定位置決めは、標準ストリームから離れるものであり、標準ストリーム中の空間

を占有することはない.

2️⃣絶対位置決めと同様に、行内ブロック要素

を区別することはない.

3️⃣固定位置を使用すると、スクロールバーがスクロールされないように要素をスクロールできます.

注意:バックグラウンドロケーションは、スクロールバーに従ってバックグラウンドピクチャをスクロールすることなく

をスクロールすることができる.

適用シーン

1️⃣ナビゲーションバー

2️⃣広告

3️⃣上部を返します--aラベルhrefプロパティは#です.上部

を返します.

注意点

1️⃣IE 6は固定位置決め

をサポートしていない

4.静的位置決め

デフォルトでは、ラベルは静的位置決め

です.
z-indexプロパティ

デフォルトでは、すべての要素にデフォルトのz-index属性があり、0

の値をとります.

の役割:位置決めフロー要素の制御に特化したカバー関係

上書き関係について

1️⃣デフォルトでは、フロー要素を配置します.デフォルトでは、標準フロー要素

が覆われます.

2️⃣後に記述する位置決めフロー要素は、前の位置決めフロー要素

を覆う.

3️⃣位置決めストリーム要素にz-index属性が設定されている場合、この値が大きいほど、一番上の

に表示されます.

注意点

①2つの要素の親要素がz-index属性を設定していない場合、z-index属性が大きい人は

に表示されます.

②両方の要素の親要素にz-index属性が設定されている場合、親要素のz-indexが大きい人は

に表示されます.

③親要素z-indexは大きくて大きくて、たとえ子要素z-indexが他の子要素より小さいとしても、子要素の親要素z-indexの大きい

を聞かなければなりません.