CSSにおけるPositionの属性紹介

Web開発をしたことがある限り、基本的にcssの中のPosition属性を使ったことがあるので、この属性の詳細を真剣に理解していない人もいるかもしれません.今からよく知っておくと、後で使うのがもっと便利になります.
アクションの4つの属性値:

relative

absolute

fixed

static

この4つのプロパティについて説明します.
 

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

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に設定されると、いったい誰を対象にオフセットしますか?ここでは2つの状況に分けられます.
(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を位置決め対象とし、ブラウザのウィンドウに従って位置決めされる.この属性は、低バージョンのIEおよびNS 6でサポートされていない場合にサポートされる.4.static positionのデフォルト値は、一般的にposition属性を設定しない場合、通常のドキュメントフローに従って並べ替えられ、Positionの値がstaticの場合、left、topなどの値を設定しても効果はありません.しかしmarginを設定するとpaddingは効果的です.
 
 
marginとpaddingについてよく知らない人もいるかもしれません.まず次のcssの効果を見てみましょう
#box{
width:300px;
height:200px;
margin:10px;
border:1px solid #000;
padding:10px;
}
 
黄色部分は10 pxの外補白、青部分は10 pxの内補白である.実際にidがboxの容器が実際に占有する空間は342 pxの幅と242 pxの高さで、中の300*200 pxはcontent領域で、つまりあなたの内容はこの領域内に置かれます.
上の図から理解できるように、marginは外距離であり、paddingは内辺距離であり、要素の幅、高さは、margin、枠線、paddingを含まない部分の高さと幅である.