html - 画像の上に適用しますか？背景画像の上に塗りたい.page-header .icon1 例： http： //jsfiddle.net/fR5F6/ <table>オレンジ色の画像の上に配置する必要があります。 どのようにそれを行うことができますか？<

Question

背景画像の上に塗りたい.page-header .icon1

例： http： //jsfiddle.net/fR5F6/

<table>オレンジ色の画像の上に配置する必要があります。

どのようにそれを行うことができますか？

<div class='page-header'>
    <h3>Some Title...</h3>
    <span class='icon1'> </span>
</div>

<table class='data'  border='1' width='500'>
    <tr>
        <td> Field1 </td>
        <td> Field2 </td>
        <td> Field3 </td>
        <td> Field4 </td>
    </tr>
    <tr>
        <td> Cell1 </td>
        <td> Cell2 </td>
        <td> Cell3 </td>
        <td> Cell4 </td>
    </tr>
    <tr>
        <td> Cell1 </td>
        <td> Cell2 </td>
        <td> Cell3 </td>
        <td> Cell4 </td>
    </tr>
 </table>

.page-header {
    background-color:pink;
    width: 1000px;
    height: 196px;
    color: white;
    font-size: 16px;
    margin: 0;
}
.page-header .icon1 {
    background:url(http://www.nigeltomm.com/images/orange_square_nigel_tomm_m.jpg) no-repeat;
    width:250px;
    height:400px;
    position:absolute;
    margin-left:5px;
    margin-top: 20px;
}

.data {
  margin-top:20px;   
}
​

Answer 1

じゃあ、使ってみませんz-indexか？好き...

.data {
  margin-top:20px;   
  z-index: 1;
  position: relative; 
  /* ...as z-index only has an effect if an element is positioned */
}

JSフィドル。</ p>

Answer 2

これを試して：

.data {
  margin-top:20px; 
z-index:2;  
position:absolute;   
}