CSSの位置決めにおけるよく使われる技法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">	</span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">  CSS  ，            ，         。  CSS  position                 。</span>

1.position:static
staticプロパティはpositionのデフォルト値です.つまり、要素にpositionプロパティが設定されていない場合、デフォルト値はstaticです.
2.position:absolute
これはよく使われるposition属性値です.エレメントにabsoluteが設定されている場合、エレメントは元のドキュメントフローから離れます.イメージとしては、例えばa要素がposition:absoluteと定義されていると、この要素はこのページの他の要素と位置的な関係を起こすのではなく、ページ全体を凌駕する浮遊状態になります.ページ内の他の要素の位置の変化、大きさの変化などは、a要素の位置に影響を与えず、局外者に相当する.
3.position:relative
relativeは最も有用な定義方法です.relativeプロパティ表示が設定されており、この要素は自分の元の位置に対して変化します.たとえば、b要素を定義し、次のcssスタイルを設定します.

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

このセグメントコードで定義されたb要素は、position属性が定義されていない位置に対して100 pxだけ下に移動する距離に位置する.relative属性値の定義は、このような位置決めモードである.
4.position:fixed
fixedの位置決めは多くありませんが、上部メニューなどの固定モードの部分の作成に非常に適しています.fixedプロパティを定義すると、要素の位置は動作に従って変化しません.
5.relative+position
同時にこの2つのポジションを使うのは、よく使われる手法で、初心者もここで多くのトラブルに遭遇する可能性があります.全体的に、1つの要素が絶対的に位置決めされた後、その参照物が自身に最も近い要素で相対的な位置決めが設定されているかどうか、設定されている場合は自分に最も近い要素で位置決めされ、その祖先要素に相対的な位置決め要素を探さなければhtmlが見つかるまで.例えば、次のコードは両者の結合を利用して2列のレイアウトを実現した.

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

内部の2つのサブdivは、その外部がrelativeとして位置付けられている要素に基づいて参照として絶対的に位置付けられます.
6.clear:bothフローティングクリア
サブエレメントが親エレメントに存在するが、親エレメントのサイズに従って親エレメントのサイズが「開く」ことなく、親エレメントが集約される場合があります.このバグの発生は、サブエレメントにfloat属性が設定されているため、親エレメントが崩壊することはありません.このバグを解決するには、親エレメントのフローティングをクリアする必要があります.例コードは、次のとおりです.

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