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 をページごとに別の方向から指定するように
スタイルシートを書いたことが無いため、完全にわからない状態です。

お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。

回答No.2

ORUKA1951 · ベストアンサー

No.1です。
　せっかく仕様書の存在をお知らせしたので、御自身で調べてください。(^^)絶対にそのほうが身につきます。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
6.2.1 'inherit'値
　各プロパティは、カスケードされた値'inherit'を持ってもよい。この値は、与えられた要素に対して、プロパティが要素の親の算出値を指定値として取ることを意味する。'inherit'値は、値の継承を強制するために使用でき、正常に継承されないプロパティにも使用できる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#value-def-inherit )］より

　直近の親コンテナブロックで、指定された本来は継承しないプロパティを強制的に継承させるのがinheritですよ。もし親要素で他の値が指定されていると、left:プロパティの初期値(auto)に戻りません。

　継承やカスケードを大きく誤解されているようです。復習しましょう。
div#test {}
↓
body#top div#test {}
は継承ではありません!!!

<div style="border:solid 2px red">
　<p style="border:inherit">なんたらかんたら</p>
　<p style="border:inherit;border-color:green">なんたらかんたら</p>
</div>
が継承です。

お礼

この度は大変的確、且つご親切にアドバイスをいただきましてありがとうございました。古い参考書で数年前から独学で進めてきましたが、そちらにはまだinheritなどは記述がなく、仕様書でも今まで確認をしておりませんでしたが、これを機会に一度目を通し、さらに研鑽を深めていきたいと思います。本当にありがとうございました。今後ともどうぞよろしくお願いいたします。

回答No.1

ORUKA1951

＞参考本やネット上の情報でも、このあたりの記述は無く、
　そんなことはありません。調べる場所が悪いだけです。公開されている仕様書には正確に書かれています。ですから、書籍やサイトで説明する必要はない。逆に言うと仕様書の存在を知らないか、知らないから説明が書ける。
　まず、仕様書だけは読みきってしまうこと。

＞上記のように、トップページのみに body#top div#test として上の要素のサイズなどを
継承していますが、
　継承してません。
　継承とは、
colorプロパティは、継承されますが、positionやtop,leftなどは継承されません。
'color' http://momdo.s35.xrea.com/web-html-test/spec/CSS21/colors.html#propdef-color
　　継承:　yes
'position' http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#propdef-position
　　継承:　no

　継承されるとは、親要素に対する指定が子孫要素に継承されるかと言う意味です。
6.2 継承( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#inheritance )

＞上の要素のtop 、 left はそのまま継承されてしまうようです。
　これらも継承されないプロパティです。
'left'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#propdef-left )
　⇒'top' ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#propdef-top )

＞（※トップページにはbodyに#topというIDを割り振ったとします。）
　その必要すらありません。

　共通したスタイルを外部スタイルシートで指定する場合であっても、スタイル指定は、
優先度、詳細度が同じ場合は
￣￣￣￣￣￣￣￣￣￣￣￣￣登場した順番に上書きされます。
6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

＞通常ページでは position を left と top からの位置で適用しておりますが、
トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。

★ここでは、同じ要素に対して異なる詳細度で指定していますね。(継承ではありません!!)
★left,topは指定されたままで取り消しされていません。

<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
<style type="text/css">
<!--
div#test{left:auto;top:auto;bottom: 80px; right: 15px;}/* 詳細度0,1,0,1 */
-->
</style>
と、すればよいだけです。
(注)standard.cssにdiv#test{left: 10px; top: -20px;}/* 詳細度0,1,0,1 */と指定されている場合
・重要度は著者指定のスタイルに該当するので同じ
・詳細度はいずれも同じ
・登場順番が異なる。
6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

＞<style>
＞　div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;}
＞　body#top div#test {bottom: 80px; right: 15px;}
＞</style>
の書き方はHTML5だと思われます。そうでなければ<style type="text/css">とtype指定が必要です。
　HTML5では、div要素は原則使いません。!!
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Note: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より
　それ以前のHTML/XHTMLなら、『　⇒id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』に使用しましょう。header,section,footer,nav,articleのようなclass名をつけたほうが良いです。

★本やろくでもないサイトではなく、まず仕様書をしっかり読みましょう。すべて説明されている内容です。
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
　⇒HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )

補足

早速ご回答いただきまして、本当にありがとうございます。詳しくお知らせいただき、大変参考になりました。

left: auto; top: auto; bottom: 80px; right: 15px;と言う設定により、無事動作させることが出来ました。

ちなみに、auto 部分を inherit でも動作させることが出来ましたが、inherit よりも auto の方がこの場合適していると言う認識でよろしいでしょうか？またご連絡いただければ幸いです。