IE6を使用しています。
次のような
「sample.css」
.sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; }
.sample2 {color:#ff0000; position:absolute; top:10px; left:10px }
.sample3 {color:#ff0000; position:absolute; top:30px; left:30px }
「a.html」
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="sample">
position:relative
<div class="sample2">
sample2
</div>
<div class="sample3">
sample3
</div>
</div>
</body>
</html>
を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を
表示させたいのですが、どうも下にずれてないようなのです・・・
何が原因なのでしょうか？
投稿日時 - 2008-09-12 03:39:22
position:relative;はもとの位置から指定した値だけ動かすためのものです。
http://www.stylish-style.com/csstec/base/position.html
.upsampleを50px動かしたとしても.downsampleは動かないので、両方のスペース分とってposition:relative; top:100px;とすれば解決できます。
できますが、もしもposition:relative;でやる必要がない場合は
.sample2 {
color:#ff0000;
position:absolute; top:10px; left:10px; }
.sample3 {
color:#ff0000;
position:absolute; top:30px; left:30px; }
.upsample {
height:50px;
background-color:#00ff00;
font-weight:bold;
position:relative;
margin-top:50px; }
.downsample {
height:50px;
background-color:#00ff00;
font-weight:bold;
position:relative;
margin-top:50px; }
というようにmarginを使うほうがわかりやすいかもしれないです。
投稿日時 - 2008-09-12 17:18:50
お礼
ご返答ありがとうございます。
仰る通りmarginを使ってやったらできました。
ありがとうございます。
投稿日時 - 2008-09-12 21:21:14
0人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（3件中 1～3件目)
このソースは全体像の一部抜粋なのかもしれないので判断つきかねますが、素朴な疑問です。
もし単純に入れ子構造の親のコンテナブロック（.upsample、.downsample）の上部余白を50px、子のブロックをそれぞれ親の上と左の基点から10px（.sample2）／30px（.sample3）の位置にレイアウトしたいだけなら、親側の位置はtopではなく単にmargin-topプロパティで指定すれば済むのでは？
top/left/bottom/rightプロパティは"position:absolute;"と組み合わせて使う分いはわかりやすいですが、relativeの時はあまり出番がない様に思います（勿論レイアウトによりケースバイケースですが）。今回の様な場合の位置決めであればmarginの方が（あれこれ計算しないで済む分）楽なので。
投稿日時 - 2008-09-12 17:34:16
お礼
ご返答ありがとうございます。
実は、プログラム（PHP）を利用してこのCSSをブロックごとに
切り抜いて他のブロックと組み合わせる（入れ子）ような処理を行いたいと思ってるのですが、
まだいろいろ試してみると理想通りにならないですね・・・
ただとりあえず今回の質問にはしっかりお答え頂いたので
ありがとうございました。
投稿日時 - 2008-09-12 21:28:03
こんにちは。
同じようなＨＴＭＬファイルを作って試して見たところ、.sampleの「top 40px;」の部分を、「top:40px;」としたところ、無事に見ることが出来ました。
従って、原因はtopの表記を間違えていた事だと思います。
投稿日時 - 2008-09-12 08:37:24
お礼
ご返答ありがとうございます。
こちらでもそのように直したらちゃんと表示されました。
ありがとうございます。
もしよろしかったらrit_13444さんにもANo.1の自分の再疑問に
お答え頂けないでしょうか？よろしくお願いします。
投稿日時 - 2008-09-12 16:25:39
top:40px; と書かなければならないのが top 40px;となっています。
あと、.sample2と.sample3のleftの表記も間違ってますよ。
これを直すとちゃんと表示されると思います。
投稿日時 - 2008-09-12 04:11:34
お礼
ご返答ありがとうございます。
言われてみればたしかに間違ってました・・・
仰る通り直したらできました。ありがとうございます。
ところでついでで申し訳ないのですが、
これをさらに拡張して、
「sample.css」
.sample2 {color:#ff0000; position:absolute; top:10px; left:10px; }
.sample3 {color:#ff0000; position:absolute; top:30px; left:30px; }
.upsample {height:50px; background-color:#00ff00; font-weight:bold; position:relative; top: 50px; }
.downsample {height:50px; background-color:#00ff00; font-weight:bold; position:relative; top: 50px; }
「a.html」
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="upsample">
position:relative
<div class="sample2">
upsample2
</div>
<div class="sample3">
upsample3
</div>
</div>
<div class="downsample">
position:relative
<div class="sample2">
downsample2
</div>
<div class="sample3">
downsample3
</div>
</div>
</body>
</html>
と、upsampleとdownsampleを上下に並べた場合に
希望する結果としてupsampleとdownsampleの間に50pxの空間を空けたいと
思ってたのですが、upsampleの上の空間はちゃんと50px空いていますが、
upsampleとdownsampleの間は空いていないのです・・・
どうやらupsampleのposition:relative; top: 50px;を認識してない気がするのですが、
どうしたら認識させることができるのでしょうか？
もしよろしかったらこれもお答えして頂けないでしょうか？
投稿日時 - 2008-09-12 16:22:42
