- ベストアンサー
positionってなぜ継承しないんですか
div#header { position : relative } と書いたら#header内は自由に配置できると思いました。 ところがh1 { left:50px } としても寄ってくれません。 h1 にposition:relative を追加したらうまく動きました。 positionが継承しないのは分かったのですが、 こういう形で継承しないのは何か変に思いました。 divは入れ物だから、その直下のセレクタは 全部相対で置けても悪くないと思うのです。 この考えてって何か変ですか？
- CSS
- 回答数8
- ありがとう数8
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (7)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
No.6お礼 >自分の考えでは大きな枠を左端なんかに合わせて、 >その内部の要素を必要があればleftやtopで >表示していけばいいという考えです。 No.6に書いているように、 HTMLが以下のようになっているとして <div id="header"> <h1 id="the_title">あいうえお</h1> <p id="catchcopy">かきくけこ</p> </div> #header, #header *{ position: relative; } または #header{position:relative;} #header *{position:absolute;} と、あらかじめ書いておけば、 必要に応じて #the_title{top:50px;left:50px;} #catchcopy{top:100px;left:50px;} とだけ指定すれば、中身だけを移動できます。 >positionが継承されないから、内側をrelativeにしたければposition:relativeを指定すれば良い。 やってることはこれだけです。 再掲 >ルールとなっている以上、そのルールを変える事ができなければそれに従うしかありません。 ----------- なぜか、という質問から、○○するにはどうすれば良いか、という質問にシフトしそうな感じですが、 もし違う質問にするなら、すみませんが、改めて新規質問として投稿をお願いします。 最初から なぜか、というのが理由を求めるものではなく「○○する方法は何か」という質問だったのであれば、 KYで申し訳ありません。 私の意見はすべて無視してください。 ○○する方法はありますか？ -> Yes/Noを求める物ではなく、「○○する方法を『もしあれば』教えてくれ」という意図ということはわかりますが、、、
お礼
いえいえ、どうしてという理由を求めるものですよ。 質問のような状態になって、やっと原因が分かって 自分の思考回路からチェックしてみたくなりまして。 技まで伝授して頂き有り難うございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞HTML開かなくて確認できる人がいるとは思いませんでした。 いえ、そもそもHTMLは文書構造をマークアップしているのですから、 <div class=header"> <h1>見出し</h1> <div class="abstract"> 要約 </div> <div class="nav"> </div> </div> <div class="section"> <h2>章見出し</h2> 内容 <div class="figure"> 挿絵 </div> <div class="aside"> 脚注 </div> </div> <div class="footer"> </div> と書いてりゃ、スタイルシートもそれなりに簡単になる。HTMLを開かなくてもよいということは、スタイルシートが div.footer div.nav{position・・・}と書かれていれば、HTMLがどう書かれているか容易に想像がつくということ。HTML5だと <header> <h1>見出し</h1> <div class="abstract"> 要約 </div> <nav> </nav> </header> <section> <h2>章見出し</h2> 内容 <figure> 挿絵 </figure> <aside> 脚注 </aside> </section> <footer> </footer> だから、もっと簡単になるでしょうね。 継承するしないは、プロパティ(たとえばposition)についてのもので、その値ではありません。relativeはしてほしくて、absoluteはしてほしくない・・なんて値で決まるとこんらんする。 プロパティ一つ一つについて、継承するかしないかが決められていますが、本当によく考えられている・・というかまったく率直に決められているなと思います。(一部、複雑なものもありますが・・)
お礼
自分はサイトを確認しながらでないと無理です。 なにせ:を抜かすだけで１時間くらい悩みますから。 何度も有り難うございます。
- uzume_z
- ベストアンサー率18% (8/44)
先生のお手前お恥ずかしいですが回答します。 私はこちらのサイトを手本に書きました。 http://homepage.nkdesk.com/lesson8/lesson8.3.html 私の場合はb2とb3の部分が可変なので 最後のfooterのb4がabsoluteで配置しないと 大変なことになってしまうんです。 多分、理想と現実のギャップの差があるのではと思います。 その辺をCSSを作成していた人達は認識していたのでは ないでしょうか。トンチンカンな回答なら済みません。
お礼
変な投稿でも真面目なものは歓迎しますよ。 先生ってORUKAさんのことでしょうか？ どう変になるのか説明してもらえると助かります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえ、逆です。 もし、途中に、何らかの要素を追加したりすると、そのたびにHTMLを開いて、祖先の数をカウントして、数値を全部書き直さなきゃならない。 基本staticで配置されると楽。 <div id="header"> <h1>見出し</h1> <p class="Logo"><img alt="Logo"></p> <div class="nav"> <ol> <li></li> <div id="header"> <h1>見出し</h1> <p class="Logo"><img alt="Logo"></p> <div> <div class="nav"> <ol> <li> <ol> <li> </li> あるいは、全体をdiv、あるいはarticleで括ってしまったとたんに、全部の位置を計算しなおすなんて出来ません。 私は、スタイルシートを変更するたびにHTMLをいちいち開くことはしませんので・・ 複雑なスタイルシートを書き始めると、きっと理解できると思います。
お礼
度々のお返事有り難うございます。 確かに私の方法だとHTML上での視認が必要ですね。 というか、HTML開かなくて確認できる人がいるとは思いませんでした。 ORUKAさんは達人なんですね。 そういう方がstaticが便利だというからそうなんでしょう。 CSSを制定した人達は頭が非常に良かったのですね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
継承されるかされないかは、好みで適当に決めたものではありません。 プロパティが決める内容を理解していれば、ほとんどは当然そうなるべき(継承されるべきかされないべきか)で決めてあります。 セラとにかにらみが継承されるとまずいのは、こういうことです。 <div id="header"> <h1>見出し</h1> <p class="Logo"><img alt="Logo"></p> <div class="nav"> <ol> <li></li> というHTMLを考えた場合、div.#headerに指定するのは、そこが下位要素の基点となるからですね。もし子孫が勝手にrelativeされると p.Logo img{position:absolute;top:0;left:0;} としたとき、p.Logoがrelativeされていると、div.#headerの右上に行きません。 同様な問題は、次のdiv.nav olをabsoluteで移動させようとしても基準点がワケワカメになる。 absoluteは、その直近のstatic以外の親要素の左上を基準にしますから、直近のすべてがrelativeやabsoluteを継承したらまずいでしょ position,float,clear,display,top,left,bottom,rightは継承しないことを期待しておかないとまずい。
お礼
再度のご回答有り難うございます。 ちょっと考えてみたんですが、positionに関しては 全部relativeでいいような気がします。 親ブロックの左上を(0,0)にして子ブロックは relativeで入れ子状に配置していきます。 p.Logoの件も(0,0)が必要ならばp.Logoで top:0;lefr:0を指定しておけばいいと思います。 どうしてもabsolute(fixed)が必要な場合だけ、 bodyの左上を(0,0)にすればいいと思います。 これで全部うまく配置できると思います。 必要な度にposition:relativeをしていたのでは なんか無駄が多いような気がしていますが。 おとなしく仕様を受け入れればいいんでしょうけど、 上記のように思いこんでいたので、納得がいかなくて。。。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
ルールを決めている人たちがそういうルールにしたんだから、そうなっています。 なぜそういうルールにしたのかは 多数決で決めたのか、アメリカ人の考え方が全員共通でそうなのか、 それは私にはわかりません。 W3CかW3Cの外部のグループか知りませんが、それを決めた人に聞いてください。 私の考え方としては、 箱そのものに指定するもの＝継承しないプロパティ 箱の中身に指定するもの＝継承するプロパティ ですね。 例えば。 この箱は青色、、、箱の中に入っているものすべてが青色とは限らない この箱はAさんの物、、、意味としては、この箱および「箱の中身」はAさんの物 日本語的には箱と箱の中身は区別せず、どちらも「箱」と称しますが、 無意識の中で区別していると思います。 つまり大きな箱の中に小さな箱を入れて、小さな箱の中に物を入れた場合、 その"物"は大きな箱の中身、と言う言い方もできると思います。 ｜ | | ｜ ｜ | 物 | ｜ ｜ ーーー ｜ ーーーーーー 大きな箱を動かしたい場合は、大きな箱「だけ」を動かすというのが私の考え方なので、 現状の「positionは継承しない」という方がしっくりきます。 追伸--- div{color:blue} というのを、例にあわせればdivの色になりますが、コンピューターの考え方と人の考え方は別物です。 colorは「箱の中身に指定するもの」です。 日本語の「箱が青色」は、border-color: blueに相当すると思います。 ご参考まで。
お礼
ご回答有り難うございます。 何となく考え方に相違があるって分かって来ました。 ちょっと表現が変かもしれないけれど、 divの中身をキャンバスのように捉えていました。 だからその下のブロックは流動的に動くと。。。 でも、皆さんの意見ではstaticでピン止めされていると。 そういうもんだって慣れたら考えは変わりますけど、 未だにしっくりと来ていません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
継承するかしないかは、極普通に、常識的に考えてください。 もし、positionが継承すれば、その子孫すべてが継承してしまうと、absoluteだと、 <div id="header"> <h1>見出し</h1> <div class="abstract"> 要約 </div> ・・がみんな後継の要素から存在を無視されてしまう。あくまで、その要素だけに限らないとまずい。その子孫は、あくまでstaticでいてもらわないと。 基本的に、配置・表示に関わるプロパティは継承しません。継承させたければ div#header *{position:inherit;} とすればよいです。そうすると困ったことになる。 どのプロパティの値が計使用されるか混乱したときは、仕様書の各プロパティの継承の項目を確認してください。・・本当に常識的にわかると思いますけど・・ REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )
お礼
ご回答有り難うございます。 >div#header *{position:inherit;} >とすればよいです。そうすると困ったことになる inheritってこういう使い方があるんですね。 大変勉強になりました。 自分の考えでは#hedearをrelativeに設定したら その中のものは自在に配置できると思ってました。 子孫はstaticでいてもらうのは仕方ないとしても その直下、つまり子供はrelativeで困りますか？ relativeで当然と思っていたら、こっちが困ったのですけど。
関連するQ&A
- position:relativeについて教えてください
初めて質問します。 ２つの横にならんだセルをDIVによって表示しようと思い <DIV style="width:112px;height:20px;background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="width:112px;height:20px;background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> というスタイルシートを作成しようとしたのですが、実際にはテスト１０まであり、一行がいかんせん長いので次のようにしてみました。 <DIV style="width:112px;height:20px;"> <DIV style="background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> 同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、 <DIV style="width:112px;height:20px;position:relative;"> <DIV style="background-color:red;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow;left:112px;top:-20px;">テスト２</DIV> この記述だと、セルが下にくっついてしまい、うまく表示できません。 positionは必ず記述しないといけないのでしょうか。できたらもっと１行を短くしたいのですが… 解決方法がわかる方いらっしゃいましたら、宜しくお願いします。
- ベストアンサー
- HTML
- 配置方法してするpositionの相対位値。
positionの相対位置の意味がわかりません。 position:relative; top:30px; left:50px; とした場合。 どこからの距離を言っているのでしょうか？ position:absolute; top:30px; left:40px; にすると、画面の上から３０ピクセル、左から４０ピクセルの位置ですよね？ これを position:relative;にすると、どこからどこまでの距離なのかがわからないのです。 よろしくお願いします。 また、HTMLなどによく出てくる「相対」という言葉がいまいちわかりません。 もちろん「絶対」という言葉もわからないのですが・・・。
- 締切済み
- 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;の指定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
- CSSのposition値の上書き（打消）について
現在、スタイルシートにてサイトを制作中です。 トップページとその他のページでposition: absolute; で配置を変えたいDIV要素があり、 以下のようなCSSを記述してテスト中です。 （※トップページにはbodyに#topというIDを割り振ったとします。） <style> div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;} body#top div#test {bottom: 80px; right: 15px;} </style> <div id="test"></div> 上記のように、トップページのみに body#top div#test として上の要素のサイズなどを 継承していますが、 position の値のみを top → bottom に、left → right に変更して設定にしようとしております。 通常ページでは position を left と top からの位置で適用しておりますが、 トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。 しかし上記のように継承して記述しても、 トップページではどうしても left と top からの指定となってしまい、 bottom: 80px; right: 15px; という新たなposition値は無視されてしまうようなのです。 横幅などは通常下にあるものが上書きされるのですが、この場合には駄目な様です・・・。 ここで難しいのは、top → bottom に、left → right に変更したいという点にあると思います。 つまり上書きは出来ないため、上の要素のtop 、 left はそのまま継承されてしまうようです。 top 、 left 、bottom 、 right のすべてを body#top div#test に記述しても駄目なので、 どうにかして継承元の top と left の設定を下位で継承させない （無効にする？）ような方法はありませんか？ 参考本やネット上の情報でも、このあたりの記述は無く、 今まであまりこのように position をページごとに別の方向から指定するように スタイルシートを書いたことが無いため、完全にわからない状態です。 お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。
- ベストアンサー
- CSS
- position:absoluteなのにセンター合わせができるのは何故？
CSSです。 うまく表示されているのですが、何でうまくいっているのかわからないことがあります。 というのも、コンテンツをセンター合わせのレイアウトにしているというのにposition:absoluteのパーツがちゃんとセンター合わせがなぜかできてしまっているんです。 ユーザがブラウザの横幅を拡げようとも狭めようとも、常に左右をセンター合わせするつくりになっています。 以下が成功ソースです。 ※下記のlinkboxは、headerというIDセレクタに包含されている。 div#linkbox { position: absolute; top:50px; padding-left: 300px; width: 500px; _width: 800px; } div#header { background: #333333; text-align: left; width:800px; height:100px; margin-left: auto; margin-right: auto; } なぜこのソースでうまくいってしまうんでしょうか。 absoluteでも、左右を設定しない場合、自動で包含ブロック内に収まるとでもいうのでしょうか。
- ベストアンサー
- HTML
- position:fixedが親要素に準じて表示してくれません。。
position:fixedが親要素に準じて表示してくれません。。 <div id="relative"> <div id="flashContent"><img></div> <div id="TopBnr"><img></div> </div> ーーCSS－ーーーーーーーーーーーーーーーーーーーーーーーーーーーー #relative { position:relative; width:990px; height:374px; margin:0px auto; } #flashContent { width:990px; height:374px; margin:0px auto; z-index:0; } #TopBnr { position:fixed; width:260px; height:90px; right:90px; top:30px; z-index:1; } Ie6対応済みです。。 なぜかIeでの配置はできているのですが、 それ以外のブラウザでは、親要素に準じて配置してくれません。 どなたか解決策を教えてください。。
- 締切済み
- HTML
- positionの設定の仕方について
中央に1つの大きな画像を配置。 そしてその画像の左右の任意の位置に、リストを配置しようと考えています。 しかし、以下のような表記にしましたがリストが思うように配置されません。 職場ではリストの配置まではうまく行きました。 が、自宅の環境で見ると、職場とはどこかの設定が違っているのか、DW8上では配置されているのですが、ブラウザ上(IE、Ff)ではリストが全く動いていません。 画像はきちんと配置されています。 どうしてこういう違いがでるのかさっぱり分からず、質問させてもらいました。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>ポジションタグ練習用ページ </title> <link href="css/position2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="position"> <ul> <li id="01"><a href="1.htm">あいうえお</a></li> <li id="02"><a href="2.html">かきくけこ</a></li> </ul> <img src="images/flower.jpg" alt="花" width="260" height="402" id="img"> </div> </body> </html> -------------------- #position { position: relative; left: 0px; top: 0px; } #img { position: relative; height: 402px; width: 260px; left: 85px; top: 0px; } #01 { position: absolute; height: 20px; width: 100px; left: -11px; top: 0px; background: #FFFFCC; } #02 { position: absolute; height: 20px; width: 100px; left: 360px; top: 26px; background: #FFCC99; }
- ベストアンサー
- HTML
- CSS idセレクタについて教えてください
いろいろな Web の CSS を参考にして CSS を書いているのですが、id セレクタの並列記載について理解が出来ないので教えてください。 とある Web にあった CSS の記述で、 #contents { margin: 0px; padding: 0px; width: 800px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; background: #FFFFFF url(title.gif) no-repeat center top; height: 60px; width:800px; text-align: center; display: block; position: relative; } は理解できるのですが、左側にメニューを配置する設定に関して #contents #sidemenu { margin: 5px; padding: 0px; float: left; width: 160px; text-align: left; background-color: #FFFFFF; } となっていて、#sidemenu ではなく、#contents #sidemenu となっていました。 <div id="contents"> あいうえお <div id="header"> かきくけこ </div> <div id="sidemenu"> メニュー </div> さらにコンテンツ </div> とすれば、contents の要素は header にも sidemenu にも継承されると思っていたのですが違っているのでしょうか。 contents と sidemenu の両要素を反映させるために #contents #sidemenu となっているのでしょうか。 初歩的な質問だと思いますが、どうぞよろしくお願いします。
- ベストアンサー
- 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
お礼
ご回答有り難うございます。 自分の考えでは大きな枠を左端なんかに合わせて、 その内部の要素を必要があればleftやtopで 表示していけばいいという考えです。 #headerは何もしなければ(0,0)に合いますから、 h1を(50,50)ずらしたい場合 h1{top:50px;left:50px}とします。 それにしても天上人同士の会話は非常に参考になります。 色々な意見が聞けてとても勉強になります。