相対値と絶対値の差

Question

私はこれを読んでいるのですが、なぜという比較的位置付けられたdivはBODYの影響を受けますが、絶対配置されたボックスは無視しますか？
他の要素の内部に配置されているときに同じように動作するとは思われませんか？

CSS：示された例では

body { 
    display: block; 
    margin: 8px; 
} 

#box_1 { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
} 

Answer 1

は：

だけでなく、相対的のために右の相対用/左一切トップ/ボトム/が存在しないので、それはとどまるべき場所、それがまま。 （本体には独自のマージンとパディングがあり、これをオーバーライドできます）。

は絶対的なものですので、他の項目は無視されるので少し上になります。

Answer 2

基本的には次のように4つの位置状態、有する：

• 静的（デフォルト）
• 相対
• 固定
• 絶対

相対および絶対差を相対値はそれ自体に対して相対値です（left:15pxは15pxで左にそれを埋め込みます）が、絶対値は（最初の非静的な親である）親と相対的に同じ属性（左：15px）を適用すると、親要素の左端から15p離れた位置にシフトされます。

これは実際には魅力的な調査であり、ウェブレイアウトの理解に非常に役立ちます。

Answer 3

上で説明した説明や説明はよくありますが、通常の人や初心者の場合は理解しづらいです。 シンプルです。

相対：相対値は位置指定なしに似ています。でも避難所あなたの場合、tは相対的な使用、そしてあなたはdivのはちょうどこのように表示されます

margin-left:10px; 

それは10pxのの空間を有する左に移動します。 同様に、次のようにします。 position：relative;

margin-left:10px; 

これは相対的なものが使用されなかったのと同じである。 同じシーケンスで他のdivにabsoluteが使用されている場合： position：absolute;

margin-left:10px; 

合計で10 + 10 = 20ピクセル余白が移動します。 相対div idの絶対値の2番目のdivと10 pxの10pxが追加されるためです。 それはやって次のようになります

#div1{ 
float:left; 
margin-left:10px; 
} 
#div2{ 
float:left; 
margin-left:10px; 
} 

Answer 4

absoluteは、ページレイアウトを行うための最善の方法です。 CSSの左上と右下をインポートする必要があります。relativeは、CSSなしのタグなしで行われます。

Answer 5

ここでは、位置の説明が簡単です：絶対および相対：相対。絶対位置と

、我々はそれが体要素からポジションを取る任意の位置の要素を定義していないpage.If上の任意の場所にhtml要素を移動することができ、それ以外の場合は、最寄りの定義された位置の要素からの位置だがかかります。 以下はその例です。

この場合、 'div2'は 'div1'要素の位置をとります。この場合

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1> 
<div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
<h2>This is a heading with an absolute position</h2> 
</div> 
</div> 

「DIV2」は位置が定義されていないとして体要素からの位置をとります。それは position.Belowは一例であり、正常だからの相対位置と

<div id='div1'> 
    <h1>This is the first position element</h1> 
    <div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
    <h2>This is a heading with an absolute position</h2> 
    </div> 
    </div> 

、HTML要素を移動することができます。

この場合、その位置は10px左から10pxの位置から移動します。

<div id='div2' style=" position: relative;left: 10px;top: 10px;"> 
<h2>This is a heading with an absolute position</h2> 
</div>