параллакса (относительные) группы слоев перекрывают друг друга

Question

Я не понимаю, почему это происходит: у меня есть: https://jsfiddle.net/d5jehq02/1

<div class="para_group"> 
    <div class="para_layer para_layer_back"> 
    <h2>background</h2> 
    </div> 
    <div class="para_layer para_layer_front"> 
    <h2>forefront</h2> 
    </div> 
</div> 

Я пытаюсь создать параллакс эффект прокрутки и хотя 2 родительских слоев (class = 'para_group') имеют position = 'relative', все еще onr дочерних divs - в частности, похоже, перекрывает свой родительский слой ...

Если вы видите ссылку на пример выше, вы поймете, что фоновый слой 2-я группа - кажется, перекрывает первую группу вместе - когда это не должно - позиция группы ition установлен в относительный - поэтому блочные объекты (родительские divs) должны появляться один ниже другого ... Я не могу разобраться с этим :(

Answer 1

Относительность условного позиционирования html здесь серьезно нарушена тем фактом, что элементы layer_back и элементы layer_front фактически перемещаются в 3D-контекст и масштабируются.

Для достижения эффекта параллакса, что делается в здесь:

Настройка 1px перспективы (комплект камеры 1px от плоскости рендеринга).

.parallax { 
    perspective: 1px; 
} 

Перемещение фоновые слои 1px глубже в поле зрения и в то же время масштабирования их в два раза больше.

.para_layer_back { 
    transform: translateZ(-1px) scale(2); 
} 

^Это сердце эффекта параллакса, как перемещение элементов 1px глубже, когда мы имеем перспективу установить на 1px, позиции элементов в два раза дальше от камеры, как передние слои, которые translateZ'd по 0. Это вызывает эффект параллакса при прокрутке, но также делает элементы меньше, потому что они находятся дальше (эффект перспективы).

Именно поэтому они имеют масштаб (2) 'd, поэтому они выглядят в оригинальном размере.

Дело в том, что они удалены от камеры, не меняя их относительных положений (они находятся рядом друг с другом), а затем они масштабируются на месте, операция масштабирования с преобразованием- начало координат в их центрах, заставляет их увеличиваться и перекрывать друг друга.

Что вы можете сделать, чтобы решить проблему, - это работать с тем, чтобы сначала отвести их друг от друга, прежде чем масштабировать их.

Посмотрите на разветвленную и обновленную скрипку, где я удалил часть «шкалы (2)» на задних слоях, они находятся сзади, и они расположены правильно (без перекрытия). http://jsfiddle.net/3x150vsx/1/

.para_layer_back { 
    transform: translateZ(-1px) scale(1); 
} 

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

Удачи: