• ベストアンサー

positionについて

画像のpositionをabsoluteで設定したいのですが ページ全体がセンタリングされているため 画像の位置が変わってしまいます。relativeで指定してしまうと画像の重なりが表現できないので使えません。だれかいい方法があれば教えてください。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

<センタリングするブロック style="position:relative;"> <img style="position:absolute;top:yy;left:xx;"> </センタリングするブロック> こんな感じにすると常に<センタリングするブロック>の上左端が基点(0,0)となります。 なのでabsoluteで配置しても大丈夫になります。

参考URL:
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#positioning-scheme
mittsu-
質問者

お礼

ありがとうございます。返事遅れてすみませんでした。ブロックとイメージのpositionを別々に設定できるのですね。これはいろんな所で活用できそうなので大変勉強になりました。ちょっと気になったのですがDream weaverのでの表示がかなりずれて表示されていたのですが、それはどうしてですか?わかれば返信お願いします。(プレビューでは正常でした。)

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

>Dream weaverのでの表示がかなりずれて表示されていた Dream weaverについてはわかりませんです。

mittsu-
質問者

お礼

そうですか・・・。ありがとうございました。  

関連するQ&A

  • CSSについて 初心者です。positionについて

    勉強中です。 すいません。教えてください。 「親要素を基準に子要素の位置を指定するには、 親要素に position: relative を指定し (absoluteにする理由があるならそちらでも良い)、 子要素に position: absolute を指定すればよいと言うことになる。」 となりますが、この概念がさっぱりわかりません。 確かに、子要素の位置をposition: absoluteで配置しようとした際に、 親要素にposition: relative(しかも、値はなし)で設定しないとうまく行きませんでした。 ネットで調べても全く意味がわかりませんでした。 なぜ子要素の位置をposition: absoluteで配置しようとした際に親要素に、position: relativeをしかも値なしで設定しないと、うまくいかないのか 詳しく教えていただけないでしょうか?m(..)m

    • ベストアンサー
    • HTML
  • CSSに関する質問です。position absolute Blockのセンタリングについて

     position: relative; 指定されたBlockについては、margin:0 auto; 指定によって、IEバグ対策も施した上でセンタリングすることに成功しました。ところが、ある別のIEバグ対策のためにそのブロック指定をabsoluteに変更した所、CSSはそれ以外何も変えないのに、今までセンタリング出来ていたブロックが途端に左寄せになってしまいました。  そこで質問です。そもそもabsolute指定されたブロックは、上記の方法ではセンタリング出来ないのでしょうか? どうすればabsolute指定されたブロックをCSSによってセンタリング出来るのでしょうか?  どうかお教えください。

  • positionについて

    positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか? また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }

    • ベストアンサー
    • CSS
  • 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と指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか?

    • ベストアンサー
    • CSS
  • positionのrelativeとabsoluteについて

    本やネットで調べても 相対位置のposition:relative;や、 絶対位置のposition:absolute;の 意味や違いが全然分かりません。 どなたかわかりやすく教えてください。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • css:positionの挙動について

    いつもお世話になっております。 positionの挙動で詰まっています。 ・absoluteを指定すると、fixedのように振る舞う ・relativeを指定すると、ウィンドウ幅が伸縮することで位置が可変する それぞれ同じ<header>を親としています。 親にはrelativeを与えてあります。 また、ひとつはpotisionプロパティを削除すると、 他の配置してある要素の位置が変わってしまいます。 親さえ違い、私には関連性の見出せない要素です。 現象の法則性が見出せず、苦戦しております。 何卒ご教示頂けませんでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • position

    positionはどういうときに使うのでしょうか? また、absoluteとrelativeの違いはわかりますが、どうやって選択すれば良いですか? よろしくお願いいたします。

  • position absoluteで画像が解像度違いでもずれないようにしたい

    ホームページの中で画像をposition absoluteで位置指定しているのですが、PCの解像度設定の違いで思わしくない位置に来てしまうことがあります。 何か良い方法で、指定場所に固定できますか? ご存じの方教えて下さい。

  • positionプロパティの設定について

    下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------

    • ベストアンサー
    • HTML
  • 配置方法してするpositionの相対位値。

    positionの相対位置の意味がわかりません。 position:relative; top:30px; left:50px; とした場合。 どこからの距離を言っているのでしょうか? position:absolute; top:30px; left:40px; にすると、画面の上から30ピクセル、左から40ピクセルの位置ですよね? これを position:relative;にすると、どこからどこまでの距離なのかがわからないのです。 よろしくお願いします。 また、HTMLなどによく出てくる「相対」という言葉がいまいちわかりません。 もちろん「絶対」という言葉もわからないのですが・・・。

    • 締切済み
    • CSS

専門家に質問してみよう