- ベストアンサー
CSSのdivのposition:relative;で位置がずれない
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"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- takagoo100
- お礼率85% (739/868)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
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を使うほうがわかりやすいかもしれないです。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
このソースは全体像の一部抜粋なのかもしれないので判断つきかねますが、素朴な疑問です。 もし単純に入れ子構造の親のコンテナブロック（.upsample、.downsample）の上部余白を50px、子のブロックをそれぞれ親の上と左の基点から10px（.sample2）／30px（.sample3）の位置にレイアウトしたいだけなら、親側の位置はtopではなく単にmargin-topプロパティで指定すれば済むのでは？ top/left/bottom/rightプロパティは"position:absolute;"と組み合わせて使う分いはわかりやすいですが、relativeの時はあまり出番がない様に思います（勿論レイアウトによりケースバイケースですが）。今回の様な場合の位置決めであればmarginの方が（あれこれ計算しないで済む分）楽なので。
お礼
ご返答ありがとうございます。 実は、プログラム（PHP）を利用してこのCSSをブロックごとに 切り抜いて他のブロックと組み合わせる（入れ子）ような処理を行いたいと思ってるのですが、 まだいろいろ試してみると理想通りにならないですね・・・ ただとりあえず今回の質問にはしっかりお答え頂いたので ありがとうございました。
こんにちは。 同じようなＨＴＭＬファイルを作って試して見たところ、.sampleの「top 40px;」の部分を、「top:40px;」としたところ、無事に見ることが出来ました。 従って、原因はtopの表記を間違えていた事だと思います。
お礼
ご返答ありがとうございます。 こちらでもそのように直したらちゃんと表示されました。 ありがとうございます。 もしよろしかったらrit_13444さんにもANo.1の自分の再疑問に お答え頂けないでしょうか？よろしくお願いします。
top:40px; と書かなければならないのが top 40px;となっています。 あと、.sample2と.sample3のleftの表記も間違ってますよ。 これを直すとちゃんと表示されると思います。
お礼
ご返答ありがとうございます。 言われてみればたしかに間違ってました・・・ 仰る通り直したらできました。ありがとうございます。 ところでついでで申し訳ないのですが、 これをさらに拡張して、 「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;を認識してない気がするのですが、 どうしたら認識させることができるのでしょうか？ もしよろしかったらこれもお答えして頂けないでしょうか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご返答ありがとうございます。 仰る通りmarginを使ってやったらできました。 ありがとうございます。