• 締切済み

position

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

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

みんなの回答

noname#83877
noname#83877
回答No.2

訂正します h1{ position:relative; }

noname#83877
noname#83877
回答No.1

どういうときに使うのかはレイアウトによります。 だいたいの場合、レイアウトに使えるのはfloat、position、displayのプロパティですが、それぞれ挙動が違うのでそれぞれを活かす使い方になると思います。 例えば横並びのメニューは一般的にfloatで作りますが、display:inline;でも作れますし、positionを利用しても作れます。 メニューの中に入る文字列が固定で無い場合、display:inline;で作るほうが柔軟です。 どうやって選択すればよいかということですが、cssのルールどおりに記述すれば問題ありません。 h1{} position:relative; }

ganmo717
質問者

お礼

positionってあまり使ってはいけないですよね?

関連するQ&A

  • 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のrelativeとabsoluteについて

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

    • ベストアンサー
    • HTML
  • CSSについて 初心者です。positionについて

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

    • ベストアンサー
    • HTML
  • positionについて

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

    • ベストアンサー
    • HTML
  • 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について下記の認識で正しいでしょうか? ・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 + abs

    スタイルシートCSSで、positionを使用する場合 position : relative + absolute を使う事が一般的のようですが、どのようなメリットがあるのでしょうか? よろしくお願いします。 参考サイトhttp://www.css-lecture.com/log/css/037.html

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

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

    • 締切済み
    • CSS
  • css:positionの挙動について

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

    • ベストアンサー
    • CSS
  • 「position:absolute」のIEのバグへの対処方法

    CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが.. メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。

    • ベストアンサー
    • HTML