- ベストアンサー
positionってなぜ継承しないんですか
div#header { position : relative } と書いたら#header内は自由に配置できると思いました。 ところがh1 { left:50px } としても寄ってくれません。 h1 にposition:relative を追加したらうまく動きました。 positionが継承しないのは分かったのですが、 こういう形で継承しないのは何か変に思いました。 divは入れ物だから、その直下のセレクタは 全部相対で置けても悪くないと思うのです。 この考えてって何か変ですか？
- CSS
- 回答数8
- ありがとう数8
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
>No.2お礼 パソコンのメイン画面をデスクトップというのは、机の上に置いたノート（ファイル）を模した物ですし、 キャンバスというのは別段変とは思えません。 写真や文書が書かれているので、むしろその方が当たっているかもしれません。 position:relativeが継承されたとして、 top、leftを記述しなければ、staticと同じ位置に表示されます。 #header, #header *{ position: relative; } #header{ top: 50px; left: 50px; } <div id="header"> <h1>あいうえお</h1> </div> positionが継承されないから、内側をrelativeにしたければposition:relativeを指定すれば良い。 逆に言えば、 もしpositionが継承されるなら、内側をstaticにしたければposition:staticを指定すれば良い。 やることは変わりませんね。 >No.4 >もし、途中に、何らかの要素を追加したりすると、そのたびにHTMLを開いて、祖先の数をカウントして、数値を全部書き直さなきゃならない。 そんなことはないでしょう。 #header>*{ /* #header * でもよい */ position:static } これだけで終わるはずです。 もしpositionが継承されるなら、継承されるというルールにより、#header * * も#header * * * も、position:staticが適用されます。 結局、positionを継承させない何らかの理由があるんでしょうけど、私にはわかりません。 absolute、relativeを継承させた場合（外、内ともにabsolute/relative）は、継承させない場合（外がrelative/absolute、内がstatic）との違いはありませんが、 ただ、継承させないヒントになりそうなのが、position:fixedを指定したときに見つかりました。 XHTML1.0 Transitionalで確認しています。 <style> #page, #page *{ /* ", #page *" を消して（#pageのみにして）違いを見てみてください */ position: fixed; } #page{ top: 50px; left: 50px; } #page{ background-color: blue; } #page *{ background-color: red; } </style> <body> <div id="page"> <p>あいうえお</p> </div> <p style="margin-top: 1000px;">あああ</p> </body> http://www.w3.org/TR/CSS21/visuren.html#choose-position position:fixedの場合は、基本的にはabsoluteと同じですが、スクロール時に常に表示されているという違いの他に、 marginを他のmarginと相殺しない、と書かれています。 、、、これは知りませんでした。。。 #page *のmarginが#pageのpadding（明記していないため、ともにブラウザデフォルト値）と相殺するかどうかの違いで、青い部分が表示されるかしないかの違いがでると思います。 position:fixedを指定したときのマージンの扱いについて調べてみると、 marginを相殺しない特別ルールの理由もわかるかもしれませんし、 position:fixedを継承させる/させないときの表示の違いの理由もわかるかもしれません。 それが十分大きな問題になりそうなら、継承するルールにしてstaticを再指定する手間よりも、継承しないというルールにした方が、メリットになると思います。 私の作る内容では、外がabsolute/relative、内がstaticということが多いので、継承しない方がstaticを再指定する手間が省けていいです。(^^; ルールとなっている以上、そのルールを変える事ができなければそれに従うしかありません。 俺ルールを作って、その俺ルールに従うソフトウェアを自分で作ればその限りではありませんが、 （コンピューターの世界では、それが許されます。NetscapeNavigator/HTMLも、Flash/ActionScriptも俺ルールでした（です）。） そのソフトウェアを多数の人が使ってくれるかどうかは、また別問題ですね。
その他の回答 (7)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
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/2280)
ルールを決めている人たちがそういうルールにしたんだから、そうなっています。 なぜそういうルールにしたのかは 多数決で決めたのか、アメリカ人の考え方が全員共通でそうなのか、 それは私にはわかりません。 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で当然と思っていたら、こっちが困ったのですけど。
お礼
ご回答有り難うございます。 自分の考えでは大きな枠を左端なんかに合わせて、 その内部の要素を必要があればleftやtopで 表示していけばいいという考えです。 #headerは何もしなければ(0,0)に合いますから、 h1を(50,50)ずらしたい場合 h1{top:50px;left:50px}とします。 それにしても天上人同士の会話は非常に参考になります。 色々な意見が聞けてとても勉強になります。