Порядок укладки CSS, элемент transform ломает абсолютного брата

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

Также, например, если я заменю transform: translateX(10px); на margin-left: 10px;, все будет так, как задумано. Просто я хотел бы использовать преобразование для плавности анимации.

Answer 1

Вот еще одно решение, установите преобразование для вашего родительского компонента div.relative и удалите его из ul. (вы также можете обернуть этот div и преобразовать его, если он лучше работает для вашего макета)

Измените эту строку в вашем CSS

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

Если это все еще нарушает ваш дизайн, вам нужно переосмыслить ваш HTML. Согласно настройке вашей статьи, трансформация создает новый контекст стека, вызывающий эти странные эффекты. Установив преобразование для родительского элемента или элемента-оболочки, вы перемещаете этот контекст вверх по цепочке, и дочерние элементы должны вести себя как обычно.