CSS の位​​置付けとアプリケーション シナリオの分析

Web ページを開発する際、CSS の配置位置属性をレイアウトに柔軟に使用することで良い結果が得られることは誰でも知っています。この記事では、位置に関する知識のポイントとよく使用される場所をまとめました。 CSSを勉強している友達は参考にしてください。

<script>ec(2);</script>

まずはpostion属性について詳しく説明します。

CSS3では、位置は次のように記述されます

概要は次のとおりです:
staticがデフォルトのレイアウトで、左上が設定されます。 。プロパティは効果がありません。
relative は相対レイアウトで、左上に設定されます。 。ファイル内のコントロールに対して相対的になります。
absolute は絶対的な配置で、左上に設定します。 。ページ全体に依存します。
fixed はブラウザ ウィンドウを基準に配置され、設定された top/left 属性はブラウザ ウィンドウの位置を基準とします。

さらに、コードをテストした後:
1. 左上の場合。 。デフォルト、絶対、固定レイアウト プロパティのいずれかの位置は、親コントロールの位置に応じて変化します。
2.relative 相対位置。親コントロールがある場合、同じレイヤー上の最も近い親コントロールではなく、最も近い親コントロールに対して相対的です。続いて兄弟コントロール。
3.static は他のカバー層には影響しません。

次に、コードを通じて上記の結論を証明しましょう:

ケース 1

HTML:

<p id="zero">
            <p id="one">one</p>
            <p id="two">two</p>
            <p id="tree">tree</p>
</p>

CSS:

　　　　　　  #zero{
                width:200px;
                height: 200px;
                margin: 100px 500px;
                background: black;
    
                z-index: 0;
            }
            #one{
                width: 100px;
                height: 100px;
                position: relative;
                top: 50px;
                left:20px;
                background: red;
                z-index: 1;
            }
            #two{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 190px;
                
                background: yellow;
                z-index: 2;
            }
            #tree{
                width: 100px;
                height: 100px;
                position: fixed;
                top: 250px;
                left: 600px;
                background: deepskyblue;
                z-index: 3;
            }

ここで、ID 1 の p が親コントロールを基準としたレイアウトであることがわかります。

ケース 2:

CSS:

b0986bfe60e63d9965dc3e05345fc743 & lt;/p & gt; & lt;/p & gt;

ここから、相対配置が比較的最近の親コントロールである場合、同じ親コントロールではないことがわかります。

ケース 3: 親コントロールがない場合:

HTML

       
               #first{
               width: 200px;
                height: 200px;
                background: black;
                margin-top: 100px;
                z-index: 1;
            }
            #second{
                margin-top: 10px;
                margin-left:10px;
                width: 150px;
                height: 150px;
                background: yellow;
                z-index:2;
            }
            #thrid{
                width: 100px;
                height: 100px;
                position:relative;
                background: red;
                top: 30px;
                left: 30px;
                z-index: 1;
            }

CSS

親コントロールがない場合、相対位置は兄弟コントロールに対して相対的になります。

CSS3 の z-index の説明

ポジション開発における一般的なアプリケーション

1. Web ページの両側にあるフローティング ウィンドウ (プレーヤー、トップ ボタン、フローティング広告、機能ボタンなど)

2.上に。

3. pを非表示にしてポップアップウィンドウ機能を実装します（pの位置とz-indexを設定することでpの位置と外観を制御します）



このうち、1と3は位置を設定するだけで比較的簡単です。 =fixed、左上、z-index を実現できます。ここでは説明しません

ケース 2:

ナビゲーション バーの上端からの高さが js 関数を呼び出してスクロール バーの位置を判断します。超過した場合は、ナビゲーション バーの位置を固定する場合は位置を固定に設定します。それ以外の場合は、位置 static や maring などの属性は変更されません。

JS:

<p id="out"></p>
<p id="out1"></p>

HTML:

 #out{
                margin-top: 50px;
                width: 200px;
                height: 200px;
                background: black;
                z-index: 1;
            }
            
            #out1{
                width: 200px;
                height: 200px;
                background: yellow;
                position: relative;
                z-index: 3;
                top:10px;
            }

適切な CSS を設定して、必要なスタイルを制御します。

関連する推奨事項:


CSSのposition属性について

CSSのfloat属性とposition:絶対比較

css: list-style-positionの使用と定義

以上がCSS の位​​置付けとアプリケーション シナリオの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。