positionについて下記の認識で正しいでしょう

質問

positionについて下記の認識で正しいでしょうか？

・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。
{
position: relative;
top:100px; left:10px
}

・absolute; 絶対。
親要素の背景
{
width: 100%;
position: relative;
background: url(../img01.jpg) no-repeat left top;

}

子要素の動かしたい要素

.box.box02 p{
position: absolute;
left: 0;
top: 0;
}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。

ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです）

・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる

補足また、まとめて指定する方法はマージンのようにないのでしょうか？

回答No.2

tkmojo · ベストアンサー

>> ＞＞
>> relativeの基準位置は親要素は関係なく、「元々居た位置」です。
>>
>> もともといた位置とは、その要素を配置した位置ということですか？

そういう事ですね。
static(無指定)の場合と同じ位置、そこが基準点です。
relativeを指定して、left(right)とtop(bottom)が無指定なら配置場所はstaticと同じです。
relativeを指定して、leftやtopに数値（と単位）を入力すれば、staticの位置を基準として入力した数値分動く事になります。

お礼

ありがとうございます。

もう一度よくまとめています。

回答No.1

tkmojo

なんか全然違うと思います。

> ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。
> ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。
> 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（> 個人的に単独で使う事はほぼないです）

これはあってます。

> ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる

これは違います。
relativeの基準位置は親要素は関係なく、「元々居た位置」です。

{
position: relative;
top:100px; left:10px
}
これだと、static（position無指定）の状態で居る位置から下に100px、右に10px移動したことになります。
ただ、margin等の移動と違って他のものはそれに伴って動くわけではないので、relativeのものを下に100pxも動かしてしまうと、その下にあるものとかぶってしまいます。
ですので、ほとんどの場合はrelativeはabsoluteの親ボックスに指定するだけに使い、leftやtopは入力しません。
（その他z-indexを入力したい時や、ブラウザのバグ回避などで指定する事もあります。）
relativeのものを動かしたいときは、margin等の方が向いてます。

leftやtopで自由に配置したいものはabsoluteで行いましょう。

お礼

半分はあっていますが？

＞＞
relativeの基準位置は親要素は関係なく、「元々居た位置」です。

もともといた位置とは、その要素を配置した位置ということですか？