テーブルとオーバーフローしたdivを持つ背景とZインデックス

Question

私はこの作業を行う方法を理解しようとしています。バックグラウンドではありません：外側のテーブルの赤は他のすべてのものを上書きしますか？そして、なぜこの例は黄色の背景に終わるのですか？それはDOMで一番下にネストされた要素ですか？

<style type="text/css"> 
    table, td, div { 
    height: 200px; 
    width: 400px; 
} 
</style> 

<table class="outer" cellpadding="0" cellspacing="0"> 
<tr> 
    <td style="background: red"> 
    <div style="overflow:auto;background:green"> 
    <table class="inner" style="width:800px"> 
     <tr> 
      <td style="background:yellow"></td> 
     </tr> 
    </table> 
    </div> 
    </td> 
</tr> 
</table> 

ここにはJSFiddle for thisがあります。

私は内側の表のセルの背景色を親のdivの背景と外側の表の親のtdで上書きしようとしています。それはまったく可能ですか？

Answer 1

Tdのバックグラウンドは最後に言います。だから技術的には、CSSだけではそれをすることはできません。 ！重要な要素をdivスタイルに入れても機能しません。とにかくとすれば、おそらくjsで修正し、tdの色を別の色に置き換えることができます。

Answer 2

bczそのCSSのデフォルトの動作uがuはウルの親をオーバーライドし、その特定のタグ にスタイルを与えるために持っているよりもuは子タグで他のCSSをしたい場合には、自動的に子のhtml

によって継承よりも、親タグにスタイルを与える場合スタイル

Answer 3

第2のtdは常に上に描画され、最初のtdの背景の上に描画されます。 style属性を使用しているため、ブロックまたは外部CSSファイルのstyleに適用されているCSSよりも常に優先されます。JavaScriptを使用したり、style属性からstyleブロックにスタイルを移動したりすることなくこの動作を変更することはできません。 jQueryのを使用して

、次のようなものでこれを達成できます。

$('.inner td').css({ 
    'background' : 'colour or image here' 
});