css position：absolute、relative詳細

CSS 2.0 HandBookでは、この属性値を設定すると、absoluteはオブジェクトを通常の文書フローから絶対的に逸脱させ、その周囲の内容のレイアウトを考慮せずに配置します。もし他のZ-indx属性の違うオブジェクトが所与の位置を占めていたら、彼らの間はお互いに影響しなくて、同じ位置で積層されます。このとき、オブジェクトは外パッチを持っていませんが、内側パッチと外枠があります。オブジェクトの絶対位置をアクティブにするには、left、right、top、bottom属性のうちの少なくとも一つを指定し、この属性値をabsoluteとする必要があります。これらの属性は彼らのデフォルト値autを使用します。これは通常のHTMLレイアウト規則に従い、前のオブジェクトの直後に提出されます。TRBL属性（TOP、RIGHT、BOTTOM、LEFT）は、position属性が設定されている場合にのみ有効です。position:absouteを設定すると、親レベル(無限)にposition属性が設定されていない場合、現在のabsouteはTRBL属性に合わせてブラウザの左上の角を元の点として位置づけられ、親レベル(無限)にposition属性を設定すると、現在のabsouteはTRBL属性に合わせて親レベル(最近)の左上の角を元の点として位置決めされる。position:relativeを設定すると、親レベル(最近)のコンテンツエリアの左上隅を参照して、元のポイントとしてTRBL属性を結合して位置決めします(または、親レベルのコンテンツエリアの前の要素に対して位置決め要素を行います)、親レベルがない場合はBODYの左上角を元の点とします。相対位置付けは積層できない。相対的な位置決めを使用する場合、要素が移動するかどうかにかかわらず、要素は元の空間を占有します。したがって、要素を移動すると、他の枠をカバーします。一般的には、ウェブページの中央に置くとAbsoluteを使ってエラーが発生しやすくなります。ウェブページは解像度の大きさに合わせて自動的に適応されています。Absoluteはブラウザの左上の角を元の点としています。解像度の変化によって位置が変わることはありません。z-inndexによって容器の上下関係を設定する必要があります。数値が大きいほど、一番上になります。数値範囲は自然数です。もちろん注意したいのですが、親子の関係はZ-indxで上下関係を設定することができません。きっと子供級は上の親のレベルより下です。この属性値をrelativeに設定すると、通常のHTMLフローにオブジェクトを保持しますが、その位置は前のオブジェクトに従ってずれます。オブジェクトを相対的に位置させた後のテキストまたはオブジェクトは、オブジェクトの自然空間をカバーすることなく、自分の空間を占有する。これとは違って、オブジェクトの位置を絶対的に特定した後のテキストまたはオブジェクトは、通常の文書フローからオブジェクトをドラッグする前に、その自然空間を占有する。絶対位置付けオブジェクトを置くと、視認領域の外にスクロールバーが出現します。相対的にオブジェクトを置くと、ビューエリアの外にスクロールバーが現れません。実は位置決めについての主要な問題は位置を覚えることです。相対的な位置付けは、「文書の流れにおける要素の初期位置に対する相対的な位置付け」であり、「最も近い位置にある祖先要素に対する相対的な位置付け」である。cssの絶対的な位置決め、相対的な位置決めを知っていますが、自分で書いたことはありません。長い間忙しく働いても，やっと完成したと言える。この二つの属性も分かりました。まとめて以下のようにします。まず下の層の構造＜body＞＜div id=posi＞＜div id=rel＞を見て、この層はposition：relativeのみを適用します。スタイル