Question

I’ve written some javascript that first loads an image into div1a, div2a, div3a and div4a.
Then it sequentially loads the “b” divs and fades out the “a” divs.

What I want is for the “b” divs to fade in over top of the “a” divs before the “a” divs fade out.

The javascript is working fine except for the fact that the “b” divs load below instead of on top of the “a” divs.

Keep in mind that this table is inside a centered “wrapper” div. So, using absolute positioning doesn’t seem to work.

<table height="258" border="0" cellpadding="0" cellspacing="2">
  <tr>
    <td width="244">
      <div id="div1a" style="position:relative; z-index:100;">HERE</div>
      <div id="div1b" style="position: relative; top: 0; left: 0; z-index:101">THERE</div>
    </td>
    <td width="244">
      <div id="div2a" style="position:relative;"></div>
      <div id="div2b" style="position:relative;"></div>
    </td>
    <td width="244">
      <div id="div3a" style="position:relative;"></div>
      <div id="div3b" style="position:relative;"></div>
    </td>
    <td width="244">
      <div id="div4a" style="position:relative;"></div>
      <div id="div4b" style="position:relative;"></div>
    </td>
  </tr>
</table>

Any help would be greatly appreciated.

Answer 1

Hmm, maybe using position: relative on the parent and position: absolute would work:

<table height="258" border="0" cellpadding="0" cellspacing="2">
  <tr>
    <td width="244" style="position:relative;">
      <div id="div1a" style="position:absolute; z-index:100;">HERE</div>
      <div id="div1b" style="position:absolute; top: 0; left: 0; z-index:101">THERE</div>
    </td>
    <td width="244" style="position:relative;">
      <div id="div2a" style="position:absolute;"></div>
      <div id="div2b" style="position:absolute;"></div>
    </td>
    <td width="244" style="position:relative;">
      <div id="div3a" style="position:absolute;"></div>
      <div id="div3b" style="position:absolute;"></div>
    </td>
    <td width="244" style="position:relative;">
      <div id="div4a" style="position:absolute;"></div>
      <div id="div4b" style="position:absolute;"></div>
    </td>
  </tr>
</table>