CSS堆叠顺序，变换元素打破绝对兄弟

Question

如何在不影响transform兄弟的情况下将position: absolute应用于元素。一直玩这个几个小时无济于事。我认为代码的解释比我能说的更清晰。

下面的工作是有意的，直到transform: translateX(10px)应用于ul。我需要变换来根据屏幕尺寸移动ul，它实际上是一个更长的列表。可以保留悬停状态吗？谢谢，webstudent

    .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;，一切都是按预期的。我想将变换用于动画平滑度。

Answer 1

继承了另外一个解决方案，在父组件div.relative上设置转换并将其从ul中删除。 （你也可以包装那个div并转换它，如果它对你的布局更好）

在你的CSS中改变这一行

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

如果这仍然破坏了您的设计，那么您需要重新考虑您的HTML。根据您的文章设置，转换会创建一个新的堆叠上下文，从而导致这些奇怪的效果。通过在父元素或包装元素上设置变换，然后将该上下文移动到链中，子元素应该像正常一样运行。