У CSS-преобразованных элементов есть z-index по умолчанию?

У меня здесь довольно простой пример: у меня есть фиксированный заголовок с другими элементами, которые сложены один за другим, один элемент преобразуется с помощью transform: rotate(360deg).

Таким образом, только преобразованный элемент перебирает фиксированную полосу при прокрутке страницы, а другие элементы - нет. Итак, вопрос состоит в том, что преобразованные элементы имеют значение по умолчанию z-index?

Когда вы используете z-index: -1; для .transform_me, он ведет себя нормально

Демо

CSS

.fixed {
    height: 30px;
    background: #f00;
    position: fixed;
    width: 100%;
    top: 0;
}

.transform_me {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

span {
    display: block;
    height: 100px;
}

Примечание. Он будет решен, если мы будем использовать say z-index: 999; для фиксированного div, но это не то, что вы ищете.

Ответы

Ответ 1

Для элементов, макет которых определяется моделью окна CSS, любое значение, отличное от none для transform, приводит к созданию как стекового контекста, так и содержащего блока. Объект действует как содержащий блок для фиксированных позиционированных потомков.

Из спецификации.

Контекст стекирования.