Question

我有一个奇怪的问题，证明是困难的。我有五个div垂直堆叠在一个表格单元格中。我希望偶数编号的div在中间div后面折叠，但在其他z-indexing之前折叠，这样堆栈默认显示为1-3-5（并且所有触摸，没有空格），偶数divs的位置和移动不会影响奇数div的位置和移动。但是，如果我把偶数div放到中间div中，那么evens的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中。这是一个好的开始。

Answer 2

我没有正确地回答你的问题：虽然这是我在本文中理解的问题的答案：可能有用：

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

Answer 3

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

具有重叠z指数的相对定位项目

3 个答案: