CSS堆叠顺序,变换元素会破坏绝对同级

时间:2019-03-11 17:34:21

标签: javascript html css html5 css3

如何在元素上应用transform而不影响position: absolute兄弟姐妹。玩了几个小时无济于事。我认为代码的解释会比我用文字更清楚。

以下内容将按预期工作,直到将transform: translateX(10px)应用于ul。我需要转换以根据屏幕尺寸移动ul,实际上它是一个更长的列表。悬停状态可以保留吗?谢谢,网络学生

    .relative {
        position: relative;
    }
    nav {
        min-width: 100vw;
        height: fit-content;
        overflow: hidden;
    }
    ul {
        display: block;
        min-width: 100vw;
        list-style-type: none;
        margin: 0;
        padding: 0;
        /* breaks stacking order */
        /* transform: translateX(10px); */
    }
    li {
        display: inline-block;
    }
    li a {
        display: block;
        padding: 4px 8px;
        font-size: 1rem;
        max-height: 1rem;
    }
    li a:hover {
        background-color: red;
    }
    .absolute-sibling {
        position: absolute;
        left: 0;
        top: calc(1rem + 8px);
        width: 100vw;
        height: fit-content;
        display: none;
    }
    li a:hover + .absolute-sibling,
    .absolute-sibling:hover {
        background-color: red;
        display: block;
    }
<div class="relative">
    <nav>
        <ul>
            <li>
                <a>text one</a>
                <!-- absolute child of .relative -->
                <div class="absolute-sibling">content one</div>
            </li>
            <li>
                <a>text two</a>
                <!-- absolute child of .relative -->
                <div class="absolute-sibling">content two</div>
            </li>
            <li>
                <a>text three</a>
                <!-- absolute child of .relative -->
                <div class="absolute-sibling">content three</div>
            </li>
        </ul>
    </nav>
</div>

包含transform的残破版本,jsfiddle可以减少代码间隔。除transform: translate(10px);

外,相同的代码

更新

这描述了我要解决的问题CSS stacking contexts

此外,例如,如果我将transform: translateX(10px);替换为margin-left: 10px;,一切都按预期进行。我只是想将转换用于动画的平滑度。

1 个答案:

答案 0 :(得分:0)

这里还有一个解决方案,在父组件div.relative上设置转换并将其从ul中删除。 (您也可以包装该div并对其进行转换,如果它更适合您的布局)

在CSS中更改此行

 .relative {
    position: relative;
    transform: translateX(10px)
}

如果这仍然破坏了您的设计,则您需要重新考虑HTML。根据您的文章,设置转换会创建一个新的堆叠上下文,从而导致这些怪异的效果。通过在父元素或包装器元素上设置转换,可以将上下文移到链上,子元素的行为应与正常一样。