CSS のpositioning_html/css_WEB-ITnose で詳しく学ぶ必要がある一般的なテクニック

<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属性値です。要素に絶対が設定されている場合、要素は元のドキュメント フローから分離されます。よりグラフィカルに表現すると、たとえば 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>#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 は、外部の位置が相対的な要素に基づいて絶対的に配置されます。

6.clear:both Clear floats

場合によっては配置が崩れます。つまり、子要素が親要素内にありますが、親要素のサイズは子のサイズに合わせて「拡張」されません。これにより、親要素の折りたたみ効果が発生します。このバグは、子要素が float 属性を設定するために発生します。このバグを解決するには、親要素に clear float を設定する必要があります。

りー