CSS の位​​置決めテクニック

この記事では、CSS の一般的に使用される 6 つのプロパティについて説明します。この記事は誰でも満足できるでしょう。

1.position:static

static 属性は、position のデフォルト値です。つまり、要素にposition 属性が設定されていない場合、そのデフォルト値は static です。

2.position:absolute

よく使われるposition属性値です。要素に絶対が設定されている場合、その要素は元のドキュメント フローから分離されます。よりグラフィカルに表現すると、たとえば a 要素がposition:absoluteで定義されている場合、この要素はページ上の他の要素と位置関係を持たず、ページ全体の上に浮遊します。ページ上の他の要素の位置やサイズなどが変更されても、アウトサイダーに相当する a 要素の位置には影響しません。

3.position:relative

relative は最も便利な定義方法です。相対属性を設定すると、元の位置を基準とした要素の変更が示されます。たとえば、 b 要素を定義し、それに次の CSS スタイルを設定します。

#b{     
    position: relative;     
    width:100px;     
    height:100px;     
    top:100px;     
}

このコードで定義された b 要素は、position 属性が定義されていない位置より 100px 下に配置されます。相対属性値の定義は、このような位置付けモードである。

4.position:fixed

固定位置決めはあまり使用されませんが、トップメニューなどの固定モード部分の制作に非常に適しています。固定属性を定義した後は、要素の位置はいかなる動作によっても変化しません。

5.relative+position

これら 2 つの位置を同時に使用することは非常に一般的なテクニックであり、初心者はここでも多くの問題に遭遇する可能性があります。一般に、要素が絶対配置されている場合、その参照は、それ自体に最も近い要素が相対配置に設定されているかどうかに基づいて行われます。設定がある場合、その要素は、それ自体に最も近い要素として配置されます。 html が見つかるまで、相対的に配置された要素の祖先要素に移動します。たとえば、次のコードは 2 つの組み合わせを使用して 2 列レイアウトを実装しています。

<span style="white-space:pre">    </span>#p-1 {     
             position:relative;     
            }     
            #p-1a {     
             position:absolute;     
             top:0;     
             rightright:0;     
             width:200px;     
            }     
            #p-1b {     
             position:absolute;     
             top:0;     
             left:0;     
             width:200px;     
            }

内の 2 つのサブ p は、その外側の要素の相対的な位置に基づいて絶対的に配置されます。

6.clear: 両方の Clear float

場合によっては、位置決めが崩れる場合があります。つまり、子要素が親要素内にありますが、親要素のサイズは、親要素のサイズと「拡張」されません。このバグは、子要素に float 属性が設定されているために発生し、親要素が折りたたまれます。このバグを解決するには、親要素の float をクリアする必要があります。サンプルコードは次のとおりです:

<span style="white-space:pre">    </span>    #p-1a {     
             float:left;     
             width:190px;     
            }     
            #p-1b {     
             float:left;     
             width:190px;     
            }     
            #p-1c {     
             clear:both;     
            }

上記は、CSS の配置で一般的に使用される 6 つのプロパティについての学習です。これが皆さんの学習に役立つことを願っています

その他の記事については、PHP 中国語 Web サイトに注目してください。 CSS の配置テクニックに関連しています。