具有重叠 z 索引的相对定位项目

Question

我有一个奇怪的问题，事实证明这很困难。我有五个 div 垂直堆叠在表格单元格中。我希望偶数编号的 div 折叠在中间 div 的后面，但在带有 z 索引的其他 div 的前面，以便堆栈默认显示为 1-3-5（并且全部接触，没有空格），偶数div 的位置和移动不会影响奇数 div 的位置和移动。但是，如果我将偶数 div 放入中间 div，则偶数的 z 索引将完全被忽略，并且它们出现在中间家伙的顶部而不是下面。

我需要这里的所有内容都相对于包含的表格单元格定位。绝对定位会将这些元素中的任何一个发送到它们不应该去的地方。还需要单元对齐规范。最终，我希望能够通过鼠标悬停（javascript）来扩展和收缩偶数项，而不移动奇数项。

  <style type="text/css">
    .oddStationary {
        position:relative;
        width:100px;
        height:120px;
        z-index:1;
        border:solid red;
    }
    .evenMover {
        position:relative;
        width:100px;
        height:120px; 
        z-index:2;
        border:solid yellow;
    }
    .middleStationary {
        position:relative;
        height:300px;
        width:200px;
        z-index:3;
        border:solid orange;
        background-color:pink;
    }
</style>

<table width="600">
    <tr>
        <td valign="top" align="center">
                <div class="oddStationary"></div>
                <div class="evenMover"></div>
                <div class="middleStationary"></div>
                <div class="evenMover"></div>
                <div class="oddStationary"></div>
        </td>
    </tr>
</table>

Answer 1

您需要为您的绝对定位建立一个共同的参考点。默认情况下，绝对值会沿着 HTML 树向上查找，直到遇到第一个“position:relative”，该位置成为新的原点。如果您没有定义，“origin”将成为 BODY 标签。您可以将 TD 设置为“position:relative”，也可以将整个内容包装在具有“position:relative”的 DIV 中。这是一个好的开始。

Answer 2

将 EvenMover 位置设置为绝对位置，然后将 EvenMover 标签放入您想要的那些 div 的 div 标签内。

    <td valign="top" align="center">
            <div class="oddStationary">
            <div class="evenMover"></div></div>
            <div class="middleStationary">
            <div class="evenMover"></div></div>
            <div class="oddStationary"></div>
    </td>

Answer 3

我没有正确理解你的问题：
无论我从本文中了解到什么，这都是您问题的答案：
可能有帮助：

<style type="text/css">
    .oddStationary {
        position:relative;
        width:100px;
        height:120px;
        z-index:1;
        border:solid red;
    }
    .evenMover {
        position:absolute;
        width:100px;
        height:120px; 
        z-index:2;
        border:solid yellow;
    }
    .middleStationary {
        position:relative;
        height:300px;
        width:200px;
        z-index:3;
        border:solid orange;
        background-color:pink;
    }
</style>

<table width="600">
    <tr>
        <td valign="top" align="center">
                <div class="oddStationary">
                <div class="evenMover"></div></div>
                <div class="middleStationary">
                <div class="evenMover"></div></div>
                <div class="oddStationary"></div>
        </td>
    </tr>
</table>