Z-индекс по позиции, зафиксированной в webkit ночью - PullRequest
2 голосов
/ 25 июля 2011

В ночных сборках webkit и chrome canary каждый элемент с фиксированной позицией, похоже, получает сверхвысокое значение z-index независимо от того, что ему дано либо внутри строки, либо в файле CSS.

См. Например, http://nick -evans.com .

Считаете ли вы, что это ошибка в этих бета-сборках или что-то неправильное в моем коде?

Единственная причина, о которой я могу подумать в моем примере, это то, что нижние элементы отображаются после загрузки страницы с помощью jQuery tmpl (это была попытка псевдоленичной загрузки).

.horizontal-carousel имеетявный z-index установлен в 1 и установлен на position:fixed, в то время как .col установлен на z-index:9, но все, кроме содержимого первого элемента section, имеют эту связь в обратном порядке, поэтому изображения в карусели охватывают их описания.

ОБНОВЛЕНИЕ

Мне пришло в голову, что поможет неунифицированный код.Вот ссылка

http://nick -evans.com / clients / me / tsch-tmpl / index.html

Ответы [ 3 ]

5 голосов
/ 28 июля 2011

Это вызвано CSS 3D-преобразованием , которое вы добавили в .horizontal-carousel.На самом деле, кажется, что кто-то сталкивался с подобной проблемой, с которой раньше сталкивался в " css z-index, потерянном после преобразования webkit translate3d ".

Является ли это вашей или их ошибкой, я 'Я не уверен.Единственное, что я могу найти в спецификации, которая выглядит связанной с этим, это:

Любое значение, отличное от 'none' для преобразования, приводит к созданию как стекового контекста, так и содержащего блока.Объект действует так, как если бы позиция: относительная была указана, но также действует как содержащий блок для фиксированных позиционированных потомков.Положение на оси Z преобразованного элемента не влияет на порядок в контексте стека.С элементами с одинаковым z-индексом объекты рисуются в порядке увеличения позиции z.

Самый простой способ исправить это, изменив значение z translate3d на -1px.Но тогда не похоже, что вы на самом деле используете преобразования в данный момент.Я не знаю, сработает ли это, если вы действительно начнете что-то делать с этими преобразованиями.

Работа с z-индексом , как элемент с преобразованием, так и его родительский могут такжепомощь, но, вероятно, потребует некоторых других изменений.

0 голосов
/ 18 декабря 2011

Меркатор, кажется, все правильно, хотя я испытал что-то немного другое. Все элементы моей страницы имеют трехмерное преобразование, и когда мое диалоговое окно Disqus появилось, чтобы войти перед публикацией комментария ... мышь не взаимодействовала с этим слоем (даже при том, что она визуализировалась над преобразованными 3d слоями). Что было интересно, так это то, что диалоговое окно с фиксированной позицией не было потомком контейнеров с 3d-преобразованиями.

У меня была эта разметка:

<body>
    <div class="book">
        <div class="page">
            <div class="front-side">stuff</div>
            <div class="back-side">other stuff</div>
        </div>
    </div>
    <div id="disqus-dialog">dialog stuff</div>

С контейнером .book с перспективой и трехмерным преобразованием на элементах .page, .front-side, .back-side. (Я использую dice.js для загрузки моего CSS из json)

'.front-side' : {transitionAll:'400ms', padding_bottom:'150px', position:'absolute', width:'100%', _webkit_backface_visibility: 'hidden', _webkit_transform: 'translate3D(0,0,1px) rotateY(360deg)'},
'.back-side' : {transitionAll:'400ms',  padding_bottom:'150px', opacity:'0', position:'absolute', _webkit_transform: 'translate3D(0,0,-1px) rotateY(180deg)', width:'100%', _webkit_backface_visibility: 'hidden'},

Но обратите внимание, у меня есть translate3D (0,0,1px) и translate3D (0,0, -1px), и я не смог взаимодействовать с моим диалоговым окном с фиксированной позицией.

Я изменил стиль translate3D на это:

'translate3D (0,0, -1px) rotateY (360deg)' 'translate3D (0,0, -2px) rotateY (180deg)'

... и вуаля! Мой диалог теперь реагировал на события мыши, но, конечно, теперь я не могу взаимодействовать с 3d-преобразованными элементами ... что дает?

Странный бизнес, но стоит усилий, чтобы это исправить. 3d Transforms рок носки ... мой рабочий сайт можно увидеть здесь с плагином disqus -> highdensitygames.com

0 голосов
/ 28 июля 2011

Я считаю эти элементы, которые имеют положение: фиксированное на странице:

  • .head (1 элемент заголовка) имеет значение z-index 9999 в строке 273

  • .static-title (4 элемента h1) имеет значение z-index 99 в строке 388

  • .no-touch .horizontal-carousel (4 элемента div)) установлен на z-index 1 в строке 489

Все эти элементы сообщают о z-index, назначенном им в таблице стилей в последнем ночной Webkit (Версия 5.0.5 (6533.21).1, r91865))

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...