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

Question

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

我需要这里的所有内容都相对于包含的表格单元格定位。绝对定位会将这些元素中的任何一个发送到它们不应该去的地方。还需要单元对齐规范。最终，我希望能够在不移动奇数项的情况下通过鼠标悬停 (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”，它成为新的起点。如果您没有定义，“来源”将成为 BODY 标签。您可以将 TD 设置为“position:relative”或将整个内容包装在具有“position:relative”的 DIV 中。这是一个好的开始。