Question

I want to apply on top of background-image .page-header .icon1

For example: http://jsfiddle.net/fR5F6/

<table> should be on top of orange image.

How can it be done?

<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

Why don’t you just use z-index then? Like…

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

JS Fiddle.
​