、--static相対的、絶対的な、固定されたCSSの位置概要

位置プロパティ値:静的、相対的、絶対的、固定
positionプロパティに関連付けられた属性は、4つのオフセット性が上、右、下、左です。階層属性のzインデックス(Zインデックス前面に大型ディスプレイ)もあります。
 
1、静的な位置決め静的:
  • デフォルトでは、右、左通常ドキュメントボックス、要素内で定義上部、底部を、位置決め、およびzインデックスが無効です。
  • ブロックレベル要素は、ドキュメントストリームの一部として、インライン要素が親要素に配置された一つ以上の行ボックスを、作成された、長方形のフレームを生成します。
        
図2に示すように、相対位置決め相対。
  • ボックスいくつかのオフセット距離の元の位置から現在位置をボックスです。彼らの遺骨が未配置の前に、素子形状、それは遺跡を占領していたスペース。
  • 相対位置決め相対位置を使用する場合、空間要素本来同じ位置、左上位置の中心点「元の要素」、セットオフセット性に応じたオフセット位置によって占め、属性階層を使用することもできます。
        #box_relative {
            位置:相対;
            左:30px;
            トップ:20ピクセル;
        }
      
  • 位置の値は、サブエレメント(位置=相対)の相対位置は、父親要素不定ではなく、位置の変化の親要素の値を変更します。
 
図3に示すように、絶対配置絶対。
  • ルート要素が配置される(相対および絶対)親要素ボックスは、それが相対しない場合、親のボックスに、相対ボックスではなく、文書の流れ空間からHTML文書は、HTML見つけること一定の(相対的および絶対的)を有しています(そうでなければその位置がまだ元の位置であり、左と上の値のデフォルト値を書き込む必要があります)
  • 左上の位置に位置決めするための基準として位置付け親要素に最も近い静的でない、位置が元の空間によって占有閉じられます。親要素の全てが静止位置である場合、最後の要素は、位置決め用の基準として現在のウィンドウに基づいています。
  • あなたは、下、左、右移動位置、トップことができ、z屈折率は、上記z軸を移動させるために使用されてもよいです。要素は、インライン要素がある場合、このターゲティングエレメントは、ブロックレベル要素に変化したとき、すなわちその幅と高い値に直接提供されてもよいが、要素がブロックレベル要素である場合、幅は初期100からなりオート%です。
【例えば】
        #box_relative {
            位置:絶対;
            左:30px;
            トップ:20ピクセル;
        }
    
 
図4に示すように、固定された位置は、固定されました:
  • 固定された絶対位置、それがページにスクロールしないように差が固定、ブラウザウィンドウに対して位置決めされ、完全にドキュメントフローのです。
 
5.その他の属性:
  • オーバーフロー:そのエリアオーバーフロー要素の内容セット物事が起こります
  • 垂直整列:垂直配向要素に配置され
  • のみ位置決め要素上の素子の積層順序は高いの前に、提供され、効果的な、好ましくは負:Zインデックス
  
6つのヒント:
    位置内部要素は変わらない、および内側要素は、絶対配置のために、固定レイアウトは、両方のDIVの中間に層を追加することができたときに、親のdivが固定されている場合1)、それは相対的なレイアウトを生成する、すなわち、固定relative-絶対配置は、要素の固定位置の内側に実現することができます。
 
(注:この記事は一部に描くこのブログの内容)

おすすめ

転載: www.cnblogs.com/chri330dj/p/12387540.html