Question

我写了一些首先将图像加载到div1a，div2a，div3a和div4a的javascript。然后它依次加载“b”div并淡出“a”div。

我想要的是“b”div在“a”div消失之前淡入“a”div的顶部。

javascript工作正常，除了“b”在下面加载而不是在“a”div之上加载。

请记住，此表位于居中的“包装器”div中。因此，使用绝对定位似乎不起作用。

<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>

非常感谢任何帮助。

Answer 1

嗯，也许在父级上使用position: relative，而position: absolute可以使用：

<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>

Answer 2

使你的容器（这里）位置：相对。将两个s放在“position：absolute; top：0; left：0;”中。不需要z-index。

Answer 3

我知道这不是你问题的直接答案，但我强烈建议你http://jquery.malsup.com/cycle/来完成你正在做的事情。听起来你很容易得到你正在寻找的互动。

无论哪种方式，祝福！

如何分层这些div标签？

3 个答案: