Fullpage.js перезаписывает z-индекс элементов

У меня очень сложная проблема с использованием библиотеки fullpage.js, которая предоставляет вам полностраничный слайдер. Я хочу, чтобы слайдер содержал фоновое изображение с заголовком (h1). Более того, между фоном и заголовком я хочу разместить в качестве наложения прозрачное изображение, которое не скользит (с абсолютным положением).

Несмотря на то, что я могу переместить заголовок над наложением, установив z-index на 2, полный page.js добавляет -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px) в контейнер слайдера, как только вы скользите, тем самым игнорируя z-значения и перемещая заголовок за оверлей.

Я пробовал transform-style: flat; (например, они предлагают здесь: css z-index потерян после преобразования webkit translate3d), но мне это не подходит.

Оказывается, я не единственный с этой проблемой (https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled).

Кто-нибудь знает, как это исправить?

Спасибо!


person Da2n    schedule 14.05.2015    source источник
comment
Вы забыли самый важный тег для своего вопроса, CSS!! Я добавил это.   -  person Alvaro    schedule 15.05.2015


Ответы (1)


просто добавьте преобразование: translate3d(0,0,1px); к элементам, которые подвергаются воздействию.

person Manuel R.    schedule 04.06.2018