Question

I have some trouble getting position: relative to work in IE9. Here’s a demo with the following code:

<div style="overflow:scroll;height:120px;">
<table id="table"  width="100%">
    <tr style="position:relative;background-color:#1b72a4;">
        <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
     <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>

     <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>

     <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>

</table>
</div>

I’m fixating the first row, by giving a style to first row like this: style="position:relative;"

However, mentioned style only works in IE7. I have to fixate first row in all versions of IE. What should I do?

Answer 1

This is what you want? You said you are fixing first row which I assume you want always on top, so position: relative; isn’t the right thing to go for, use position: absolute; instead

Demo

CSS

div {
  display: inline-block;
}

#table {
   width: 600px;
}

.fixed {
   position:absolute;
   background-color:#1b72a4;
}

.fixed td {
   width: 100px;
}

#table tr:nth-child(2) td {
   padding-top: 20px;
}