質問: cssのposition値の上書き(打消)について 現在、スタイルシートにてサイトを制作中です。 トップページとその他のページでposition: absolute; で配置を変えたいdiv要素があり、 以下のようなcssを記述してテスト中です。 (※トップページにはbodyに#topというidを割り振ったとします。) div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;} body#top div#test {bottom: 80px; right: 15px;} 上記のように、トップページのみに 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 をページごとに別の方向から指定するように スタイルシートを書いたことが無いため、完全にわからない状態です。 お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。
回答: >参考本やネット上の情報でも、このあたりの記述は無く、 そんなことはありません。調べる場所が悪いだけです。公開されている仕様書には正確に書かれています。ですから、書籍やサイトで説明する必要はない。逆に言うと仕様書の存在を知らないか、知らないから説明が書ける。 まず、仕様書だけは読みきってしまうこと。 >上記のように、トップページのみに 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は指定されたままで取り消しされていません。 と、すればよいだけです。 (注)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 ) > > div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;} > body#top div#test {bottom: 80px; right: 15px;} > の書き方はhtml5だと思われます。そうでなければ