在图像上应用？<table> </table>

Question

我想在background-image .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 Fiddle。

Answer 2

试试这个：

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