css絶対位置決め

アクションの4つの属性値:
relative
absolute
fixed
static
この4つのプロパティについて説明します.

1.relative relativeプロパティは比較的簡単で、どのオブジェクトに対してオフセットされているかを明らかにします.答えはそれ自体の位置です.上記のコードでは、sub 1とsub 2は同級関係であり、sub 1のrelative属性を設定すると、例えば以下のCSSコードを設定します.
#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}
relativeプロパティを設定しない場合、sub 1の位置は通常のドキュメントフローに従って、ある位置にあるべきであることを理解できます.しかし、sub 1をrelativeに設定すると、top,right,bottom,leftの値がその本来の位置に従ってシフトし、relativeの「相対的」な意味もここに現れている.これについては、sub 1がrelativeを設定しない場合はどこにあるべきかを覚えておいてください.設定したら、その位置に従ってオフセットします.その後の問題は、sub 2の位置はどこにあるのかということです.答えは元はどこにあったのか、今はどこにあるのか、sub 1がpositionの属性を増やしたからといって位置が変わることはありません.このときsub 2のpositionもrelativeに設定すると、どのような現象が発生しますか?このときもsub 1と同様に,本来あるべき位置に従ってオフセットする.注意relativeのオフセットは、オブジェクトのmarginの左上側に基づいています.2.absoluteという属性はいつも誤解を与える人がいる.positionプロパティがabsoluteに設定されている場合、ブラウザウィンドウに従って常に位置決めされるのは間違いです.実際、これはfixedプロパティの特徴です.sub 1のpositionがabsoluteに設定されると、いったい誰を対象にオフセットしますか?ここでは,(1)sub 1の親(または曽祖父であれば親)parentにもposition属性が設定されており,positionの属性値がabsoluteまたはrelativeの場合,すなわちデフォルト値ではない場合,sub 1はこのparentに従って位置決めされる.オブジェクトは特定されていますが、parentのどの位置決め点で位置決めするのか、詳細に注意する必要があります.parentがmargin,border,paddingなどの属性を設定している場合、この位置決め点はpaddingを無視し、paddingから始まる場所(すなわちpaddingの左上隅からのみ)から位置決めされるので、marginの左上端で位置決めされると考えるのは当然のことだと思います.次の質問は、sub 2の位置はどこへ行ったのでしょうか?positionがabsoluteに設定されると、sub 1が正常なドキュメントストリームをオーバーフローさせるため、parentに属していないように浮かび上がり、DreamWeaverでは「レイヤ」と呼ばれていますが、実は同じ意味です.このときsub 2はsub 1の位置を取得し、そのドキュメントストリームはsub 1ではなくparentから直接開始される.
(2)sub 1にposition属性を持つ親オブジェクトが1つも存在しない場合,bodyを位置決めオブジェクトとしてブラウザのウィンドウに従って位置決めすることは理解しやすい.3.fixed fixedは特殊なabsoluteである.すなわち、fixedは常にbodyを位置決め対象とし、ブラウザのウィンドウに従って位置決めされる.4.static positionのデフォルト値は、一般的にpositionプロパティを設定しない場合、通常のドキュメントフローに従って並べ替えられます.
二、positionの実際の用途:
絶対位置決めpositionはボックスオブジェクトを位置決めするために使用され、1つのレイアウトのいくつかの小さなオブジェクトがcss padding、css marginで相対的に位置決めしにくい場合があります.この場合、絶対位置決めを使用して簡単にできます.特に1つの箱の中のいくつかの小さな箱の不規則なレイアウトは、positionを使用してオブジェクトを絶対的に位置決めするのに非常に便利です.
絶対位置決めpositionモデルは図、不規則なレイアウトを適用し、position:absoluteを利用することができる.position:relativeによる絶対位置決め
絶対位置決めとfloatフローティングは同時に使用できません.例えば、大きな箱の中には絶対位置決めがあり、css floatフローティング位置決めがあります.これにより、IE 6ブラウザは変更対象の中のこれらの絶対位置決めと相対位置決めを表示しません.これもIE 6 CSS HACKでしょう.混用しないでください.
三、position使用条件
position:absolute;position:relative絶対位置決めは、通常、親定義position:relative位置決め、子定義position:absolute絶対位置決めプロパティを使用し、子はleftまたはrightおよびtopまたはbottomを使用して絶対位置決めを行います.
.divcss 5{position:relative}定義は、通常CSS幅とCSS高さを再定義することが望ましい.divcss 5-a{position:absolute;left:10 px;top:10 px}ここでは、親の左側からの距離間隔を10 px、親の上からの距離を10 pxまたは定義.divcss 5-a{position:absolute;right:10 px;bottom:10 px}ここでは親から右へ10 px、親から下へ10 pxを定義します
対応するHTML構造
これにより、親のdivcss 5ボックス内に「divcss 5-a」が絶対的に配置されます.
注意:left(左)とright(右)は、1つのオブジェクトで1つの定義しか選択できません.bottom(下)とtop(上)も、1つのオブジェクトで1つの定義しか選択できません.
四、実例
ここでDIVCSS 5は皆さんの実例のためにposition絶対位置決めを適用して、私達は1つの最外層の箱cssの枠を赤色に設定して、css widthは400 pxで、css heightは200 pxで、内部は2つの箱を含んで、絶対位置決めのこの2つの箱を使うために、第1の箱CSSは“divcss 5-a”と命名して、その幅は100 pxで、背景の色は黒で、高さは100 pxで、位置決め距離は親級の上で10 pxで、距離は左は10 pxです;2番目のボックスCSSクラスは「divcss 5-b」と命名され、幅と高さはそれぞれ50 px、css背景色は青、親から下距離は13 px、親から右側は15 pxである.
1、cssコードは以下の通り

  
  
  
  

   
   
   
   
<style> 
   
   
   
   
.divcss5{ position:relative;width:400px;height:200px; 
   
   
   
   
border:1px solid #000} 
   
   
   
   
/*     position:relative              */ 
   
   
   
   
.divcss5-a{ position:absolute;width:100px;height:100px; 
   
   
   
   
left:10px;top:10px;background:#000} 
   
   
   
   
/*       position:absolute       left top       */ 
   
   
   
   
.divcss5-b{ position:absolute;width:50px;height:50px; 
   
   
   
   
right:15px;bottom:13px;background:#00F} 
   
   
   
   
/*       position:absolute       right bottom       */ 
   
   
   
   
</style> 
  
  
  
  

2、htmlコードクリップ

  
  
  
  

   
   
   
   
<div class="divcss5"> 
   
   
   
   
    <div class="divcss5-a"></div> 
   
   
   
   
    <div class="divcss5-b"></div> 
   
   
   
   
</div> 
  
  
  
  

まとめ:
一般的にposition:absolute;position:relative絶対位置決めレイアウト、CSSによる定義位置決め、DIVレイアウトHTML、注意どこでposition:relative、どこでposition:absoluteを使用して位置決めするか、同時にleft、right、top、bottomの配合位置決め具体位置を使用することを忘れないでください.絶対位置決め親がposition:relativeを使用せずにposition:absolute絶対位置決めを直接使用する場合、bodyラベルを親とし、position:absolute定義オブジェクトを使用してDIVの階層構造にかかわらず、を親として絶対位置決めを行うようにドラッグされます.絶対位置決めはとても使いやすいですが、乱用しないでください.どこでも使います.そうすると、距離の上、下、左、右の間隔を計算するのがおっくうになることがあります.同時に、CSSコードが肥大化し、より経験的に適切に使用することができます.
絶対位置決めではcss z−indexを用いてcss層のオーバーラップ順序を定義することができる.