html - PNG の HTML 3 レイヤー

Question

テーブルに3層のpngを配置することは可能ですか? 私はそれをやろうとしています：

これは 6 列のテーブルです。

• 灰色の矢印 - テーブルの背景画像
• 赤い矢印 - テーブル内の PNG
• 青い矢印 - トップ製品バナーのホバリング

私はフォトショップでこのレンダリングを行いました。これが可能かどうか興味があります。ブルーとグレーで動作するセットアップがありますが、トップ製品を一番上に表示するバーを取得するのは難しいようです. これは Magento CMS ページで行われていることに注意してください。

編集：これまでの私のコードは次のとおりです

<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="120" background="http://the-garage.net/homefiles/background/section1.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section2.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td width="150" height="120" background="http://the-garage.net/homefiles/background/section3.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section4.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section5.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section6.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
</tr>
<tr>
<td> Description</td>
<td> Description</td>
<td> Description</td>
<td> Description</td>
<td> Description</td>
<td> Description</td>
</tr>

</table>

Answer 1

そのテーブルをラッパーに入れ、ラッパーの位置を相対的にすることができます。次に、トップ製品のバナーを追加して絶対に配置します。バナーの z-index を高くするか、ラッパーの最後に配置してください。

Answer 2

テーブルが絶対位置を使用していることを確認してください。

table {
position:absolute;
}

その後、上、左、右、または下の値を設定して、テーブルを配置する場所を設定します。