アプリ版：「スタンプのみでお礼する」機能のリリースについて

positionってなぜ継承しないんですか

解決済

  • 質問者：noname#147836
  • 質問日時：
  • 回答数：8件

div#header { position : relative }
と書いたら#header内は自由に配置できると思いました。

ところがh1 { left:50px } としても寄ってくれません。
h1 にposition:relative を追加したらうまく動きました。

positionが継承しないのは分かったのですが、
こういう形で継承しないのは何か変に思いました。

divは入れ物だから、その直下のセレクタは
全部相対で置けても悪くないと思うのです。
この考えてって何か変ですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.6ベストアンサー

  • 回答者： taloo
  • 回答日時：

>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-p …
position:fixedの場合は、基本的にはabsoluteと同じですが、スクロール時に常に表示されているという違いの他に、
marginを他のmarginと相殺しない、と書かれています。
、、、これは知りませんでした。。。
#page *のmarginが#pageのpadding（明記していないため、ともにブラウザデフォルト値）と相殺するかどうかの違いで、青い部分が表示されるかしないかの違いがでると思います。


position:fixedを指定したときのマージンの扱いについて調べてみると、
marginを相殺しない特別ルールの理由もわかるかもしれませんし、
position:fixedを継承させる/させないときの表示の違いの理由もわかるかもしれません。
それが十分大きな問題になりそうなら、継承するルールにしてstaticを再指定する手間よりも、継承しないというルールにした方が、メリットになると思います。

私の作る内容では、外がabsolute/relative、内がstaticということが多いので、継承しない方がstaticを再指定する手間が省けていいです。(^^;


ルールとなっている以上、そのルールを変える事ができなければそれに従うしかありません。
俺ルールを作って、その俺ルールに従うソフトウェアを自分で作ればその限りではありませんが、
（コンピューターの世界では、それが許されます。NetscapeNavigator/HTMLも、Flash/ActionScriptも俺ルールでした（です）。）
そのソフトウェアを多数の人が使ってくれるかどうかは、また別問題ですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答有り難うございます。
自分の考えでは大きな枠を左端なんかに合わせて、
その内部の要素を必要があればleftやtopで
表示していけばいいという考えです。
　
#headerは何もしなければ(0,0)に合いますから、
h1を(50,50)ずらしたい場合
h1{top:50px;left:50px}とします。

それにしても天上人同士の会話は非常に参考になります。
色々な意見が聞けてとても勉強になります。

通報する
お礼日時：2011/10/16 18:23

No.8

  • 回答者： taloo
  • 回答日時：

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を求める物ではなく、「○○する方法を『もしあれば』教えてくれ」という意図ということはわかりますが、、、
    • good
    • 0
    • 件
通報する
この回答へのお礼

いえいえ、どうしてという理由を求めるものですよ。
質問のような状態になって、やっと原因が分かって
自分の思考回路からチェックしてみたくなりまして。

技まで伝授して頂き有り難うございました。

通報する
お礼日時：2011/10/17 15:29

No.7

  • 回答者： ORUKA1951
  • 回答日時：

＞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はしてほしくない・・なんて値で決まるとこんらんする。
　プロパティ一つ一つについて、継承するかしないかが決められていますが、本当によく考えられている・・というかまったく率直に決められているなと思います。(一部、複雑なものもありますが・・)
    • good
    • 0
    • 件
通報する
この回答へのお礼

自分はサイトを確認しながらでないと無理です。
なにせ:を抜かすだけで１時間くらい悩みますから。

何度も有り難うございます。

通報する
お礼日時：2011/10/17 15:24

No.5

  • 回答者： uzume_z
  • 回答日時：

先生のお手前お恥ずかしいですが回答します。


私はこちらのサイトを手本に書きました。
http://homepage.nkdesk.com/lesson8/lesson8.3.html

私の場合はb2とb3の部分が可変なので
最後のfooterのb4がabsoluteで配置しないと
大変なことになってしまうんです。

多分、理想と現実のギャップの差があるのではと思います。
その辺をCSSを作成していた人達は認識していたのでは
ないでしょうか。トンチンカンな回答なら済みません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

変な投稿でも真面目なものは歓迎しますよ。
先生ってORUKAさんのことでしょうか？

どう変になるのか説明してもらえると助かります。

通報する
お礼日時：2011/10/16 18:02

No.4

  • 回答者： ORUKA1951
  • 回答日時：

いえ、逆です。


もし、途中に、何らかの要素を追加したりすると、そのたびに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をいちいち開くことはしませんので・・

複雑なスタイルシートを書き始めると、きっと理解できると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

度々のお返事有り難うございます。
確かに私の方法だとHTML上での視認が必要ですね。
というか、HTML開かなくて確認できる人がいるとは思いませんでした。
ORUKAさんは達人なんですね。

そういう方がstaticが便利だというからそうなんでしょう。
CSSを制定した人達は頭が非常に良かったのですね。

通報する
お礼日時：2011/10/16 17:59

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　継承されるかされないかは、好みで適当に決めたものではありません。


プロパティが決める内容を理解していれば、ほとんどは当然そうなるべき(継承されるべきかされないべきか)で決めてあります。
　セラとにかにらみが継承されるとまずいのは、こういうことです。
<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は継承しないことを期待しておかないとまずい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

再度のご回答有り難うございます。
ちょっと考えてみたんですが、positionに関しては
全部relativeでいいような気がします。

親ブロックの左上を(0,0)にして子ブロックは
relativeで入れ子状に配置していきます。
p.Logoの件も(0,0)が必要ならばp.Logoで
top:0;lefr:0を指定しておけばいいと思います。

どうしてもabsolute(fixed)が必要な場合だけ、
bodyの左上を(0,0)にすればいいと思います。

これで全部うまく配置できると思います。
必要な度にposition:relativeをしていたのでは
なんか無駄が多いような気がしていますが。

おとなしく仕様を受け入れればいいんでしょうけど、
上記のように思いこんでいたので、納得がいかなくて。。。

通報する
お礼日時：2011/10/16 14:45

No.2

  • 回答者： taloo
  • 回答日時：

ルールを決めている人たちがそういうルールにしたんだから、そうなっています。



なぜそういうルールにしたのかは
多数決で決めたのか、アメリカ人の考え方が全員共通でそうなのか、
それは私にはわかりません。
W3CかW3Cの外部のグループか知りませんが、それを決めた人に聞いてください。


私の考え方としては、
箱そのものに指定するもの＝継承しないプロパティ
箱の中身に指定するもの＝継承するプロパティ
ですね。


例えば。

この箱は青色、、、箱の中に入っているものすべてが青色とは限らない
この箱はAさんの物、、、意味としては、この箱および「箱の中身」はAさんの物

日本語的には箱と箱の中身は区別せず、どちらも「箱」と称しますが、
無意識の中で区別していると思います。


つまり大きな箱の中に小さな箱を入れて、小さな箱の中に物を入れた場合、
その"物"は大きな箱の中身、と言う言い方もできると思います。

｜　|　　　|　｜
｜　|　物　|　｜
｜　 ーーー 　｜
　ーーーーーー

大きな箱を動かしたい場合は、大きな箱「だけ」を動かすというのが私の考え方なので、
現状の「positionは継承しない」という方がしっくりきます。


追伸---
div{color:blue}
というのを、例にあわせればdivの色になりますが、コンピューターの考え方と人の考え方は別物です。
colorは「箱の中身に指定するもの」です。
日本語の「箱が青色」は、border-color: blueに相当すると思います。


ご参考まで。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答有り難うございます。
何となく考え方に相違があるって分かって来ました。

ちょっと表現が変かもしれないけれど、
divの中身をキャンバスのように捉えていました。
だからその下のブロックは流動的に動くと。。。

でも、皆さんの意見ではstaticでピン止めされていると。　
そういうもんだって慣れたら考えは変わりますけど、
未だにしっくりと来ていません。

通報する
お礼日時：2011/10/16 11:49

No.1

  • 回答者： ORUKA1951
  • 回答日時：

継承するかしないかは、極普通に、常識的に考えてください。


もし、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 … )
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答有り難うございます。
>div#header *{position:inherit;}
>とすればよいです。そうすると困ったことになる

inheritってこういう使い方があるんですね。
大変勉強になりました。

自分の考えでは#hedearをrelativeに設定したら
その中のものは自在に配置できると思ってました。

子孫はstaticでいてもらうのは仕方ないとしても
その直下、つまり子供はrelativeで困りますか？
relativeで当然と思っていたら、こっちが困ったのですけど。

通報する
お礼日時：2011/10/16 11:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報