CSSのdivのposition:relative;で位置がずれない

解決済

質問者：takagoo100
質問日時：2008/09/12 03:39
回答数：4件

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"にある内容を
表示させたいのですが、どうも下にずれてないようなのです・・・
何が原因なのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： noname#66720
回答日時：2008/09/12 17:18

position:relative;はもとの位置から指定した値だけ動かすためのものです。

http://www.stylish-style.com/csstec/base/positio …
.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を使うほうがわかりやすいかもしれないです。

- 0
- 件

通報する

この回答へのお礼

ご返答ありがとうございます。
仰る通りmarginを使ってやったらできました。
ありがとうございます。

通報する

お礼日時：2008/09/12 21:21

No.4

回答者： abril
回答日時：2008/09/12 17:34

このソースは全体像の一部抜粋なのかもしれないので判断つきかねますが、素朴な疑問です。

もし単純に入れ子構造の親のコンテナブロック（.upsample、.downsample）の上部余白を50px、子のブロックをそれぞれ親の上と左の基点から10px（.sample2）／30px（.sample3）の位置にレイアウトしたいだけなら、親側の位置はtopではなく単にmargin-topプロパティで指定すれば済むのでは？
top/left/bottom/rightプロパティは"position:absolute;"と組み合わせて使う分いはわかりやすいですが、relativeの時はあまり出番がない様に思います（勿論レイアウトによりケースバイケースですが）。今回の様な場合の位置決めであればmarginの方が（あれこれ計算しないで済む分）楽なので。

- 0
- 件

通報する

この回答へのお礼

ご返答ありがとうございます。
実は、プログラム（PHP）を利用してこのCSSをブロックごとに
切り抜いて他のブロックと組み合わせる（入れ子）ような処理を行いたいと思ってるのですが、
まだいろいろ試してみると理想通りにならないですね・・・
ただとりあえず今回の質問にはしっかりお答え頂いたので
ありがとうございました。

通報する

お礼日時：2008/09/12 21:28

No.2

回答者： noname#77303
回答日時：2008/09/12 08:37

こんにちは。

同じようなＨＴＭＬファイルを作って試して見たところ、.sampleの「top　40px;」の部分を、「top:40px;」としたところ、無事に見ることが出来ました。
従って、原因はtopの表記を間違えていた事だと思います。

- 0
- 件

通報する

この回答へのお礼

ご返答ありがとうございます。
こちらでもそのように直したらちゃんと表示されました。
ありがとうございます。

もしよろしかったらrit_13444さんにもANo.1の自分の再疑問に
お答え頂けないでしょうか？よろしくお願いします。

通報する

お礼日時：2008/09/12 16:25

No.1

回答者： noname#66720
回答日時：2008/09/12 04:11

top:40px; と書かなければならないのが top 40px;となっています。

あと、.sample2と.sample3のleftの表記も間違ってますよ。
これを直すとちゃんと表示されると思います。

- 0
- 件

通報する

この回答へのお礼

ご返答ありがとうございます。
言われてみればたしかに間違ってました・・・
仰る通り直したらできました。ありがとうございます。

ところでついでで申し訳ないのですが、
これをさらに拡張して、

「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;を認識してない気がするのですが、
どうしたら認識させることができるのでしょうか？
もしよろしかったらこれもお答えして頂けないでしょうか？