ポジショニング
-
0 名前： ビギナーくん ： 2006/04/06 09:04
- ご質問させてください。
どうもポジショニングの意味がよくわかりません。
絶対配置（absolute)は大体分かるのですが
相対配置（relative)がイマイチつかめません。
どの部分に対して相対的なのか・・・？
超初心者ですがお願いします。
-
1 名前： 通りすがり ： 2006/04/06 09:04
- ＞どの部分に対して相対的なのか・・・？
「元あった場所」に対しての相対です。
例えば、
<body>
<img src="" style="margin-top:20px;margin-left:20px;" alt="">
</body>
この画像は表示領域の左上を(0,0)座標とし、上から20px、左から20pxの位置にあることになります。
absoluteをつけると、表示領域の左上を起点とするので、同じ位置に表示しようと思ったら、
top:20px;left:20px;を付け加えます。
relativeは、positionをつけていないときの位置を基点とするので、上から20px、左から20pxの位置が(0,0)座標になります。
<body>
<div style="position:relative; top:20px;left:20px;border:solid 1px #999999;">
<img src="" style="" alt="">
<img src="" style="" alt="">
<img src="" style="position:absolute; top:20px;left:20px;" alt="">
</body>
親要素にrelativeをつけると、子要素にあるabsoluteは親要素の左上が起点となります。
説明的には間違っているかもしれませんが、自分的にはこれで納得しています(^^;
-
2 名前： Pid ： 2006/04/06 09:04
- ※自分の質問に「ご」という尊敬の接頭辞は要りません (^^;)。
position: relative; は，本来配置されるはずだった所を基準にして，どれだけズラして配置するかを指定します。
position: absolute; は，位置指定された[*]最も近い親を基準にして，どれだけズラして配置するかを指定します。位置指定された親がなければ，初期包含ブロックが基準になります。
[*] 「位置指定された」とは，position に absolute，relative，fix のいずれかを指定されたボックスを指します。
<p>
本来配置されるはずだった場所を基準にして<em style="position: relative; left: 1em; top: 1em; ">配置</em>される。
</p>
<p style="position: relative; ">
位置指定された p 要素を基準にして<em style="position: absolute; left: 1em; top: 1em; ">配置</em>される。
</p>
※かぶった (^^;)。
-
3 名前： ビギナーくん ： 2006/04/06 09:04
- ありがとうございます。何となくですが分かってきました。
ポジショニングで別の質問ですが
例えば↓
div.title.block{
position: absolute;
top: 0;
left: 0;
margin-left: 56px;
padding-top: 6px
width: 90%;
height: 5em;
}
といった記述なのですが・・・
position指定でのleft指定と
magin-left指定では意味が違うのですか？
お願いします。
-
4 名前： ビギナーくん ： 2006/04/06 09:04
- 記述にたいぶ抜けがあったようです↑
-
5 名前： Pid ： 2006/04/06 09:04
- 別の質問は新しいスレッドにして下さい。
> position指定でのleft指定と
> magin-left指定では意味が違うのですか？
まずソースの「抜け」を修正して下さい。ご質問の意図がイマイチ掴めないので，「この position 指定のソースと，この margin 指定のソースでは結果が同じように見えるが，何が違うのか」のように質問されると良いでしょう。
-
6 名前： 通りすがり ： 2006/04/06 09:04
- > position指定でのleft指定と
> magin-left指定では意味が違うのですか？
positionに付随するleftなどは座標の指定ですね。
20pxと指定したとき、0〜20pxまでの間に何があるわけでもない。
marginなどのleftは幅の指定でしょう。
20pxと指定したとき、0〜20pxまでの間には余白…何も書き込めない幅があるわけですね。
多分。
-
7 名前： ビギナーくん ： 2006/04/06 09:04
- 通りすがりさんありがとうございます。
そうでしたね。単純なところでつまずいてました。
勉強始めてからそろそろ頭が回らなくなってきてました。
引き続きやってみます。
ありがとうございました。
