CSS の位​​置配置プロパティを使用する際の重要なポイント

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 列のレイアウトを実装しています。

#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:both Clear floats
時々、位置決めが崩れます。つまり、子要素が親要素内にありますが、親要素のサイズは子のサイズに合わせて「拡張」されません。これにより、親要素の折りたたみ効果が発生します。このバグは、子要素が float 属性を設定するために発生します。このバグを解決するには、親要素に clear float を設定する必要があります。

#p-1a 
{     
             float:left;     
             width:190px;     
 }     
            #p-1b
 {     
             float:left;     
             width:190px;     
 }     
            #p-1c
 {     
             clear:both;     
 }

CSS 位置決め属性の使用に関する関連記事については、PHP 中国語 Web サイトに注目してください