嵌套元素之间的css z-index？

Question

我需要让一个嵌套元素部分显示在其父元素后面，但到目前为止它不起作用。

父元素定位为“相对”，z-index 为 100；嵌套元素的 z-index 为 50，定位为“绝对”，如下例所示：

    <ul class="parent-element">
        <li> some text </li>
        <li> some text </li>
        <li> some text 
                <ul class="nested-element">
                    <li> some text </li>
                    <li> some text </li>
                    <li> some text </li>
                </ul>
   </li>
 </ul>

    <style type="text/css">
    .parent-element {
      position: relative;
      z-index: 1000000000000000000000000;
    {

    .nested-element {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
    {
</style>

看，无论我给他们什么 z-index，嵌套元素都保持在顶部。它向我建议您不能更改父子元素之间的堆栈顺序，但这将是一个非常好的解决方案，因为我需要嵌套列表部分滑到父列表下方。我该怎么办？

Answer 1

我相信您是正确的，您不能更改父级与其子级之间的堆叠顺序。我过去曾使用clip 属性来模拟在其父级下滑动的子列表，方法是剪掉与父级重叠（位于“下方”）的子级部分。

编辑这是我过去如何使用剪辑来实现效果的示例，但我不确定这是否是您正在寻找的：http://jsfiddle.net/q4170f3o/3/

（抱歉，我最初的示例无缘无故地固定了高度。）

基本上它所做的是将子项的右边缘设置为父项的右边缘并将其剪切为零宽度但在子项的右边缘。然后在悬停时，将左剪辑边界一直向左过渡，同时将子项的右边缘向右移动等于子项宽度的量。不幸的是，如果不为孩子设置宽度，我想不出这将如何工作，但是当我在导航场景中使用它时，我还没有发现这在实践中是一个问题。希望这会有所帮助！