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 =＆＃39; para_group＆＃39;）有位置=＆＃39; relative＆＃39;，仍然是子div的特定 - 具体而言似乎与其父层重叠......

如果您看到上面的示例链接，您会发现第二组中的背景图层 - 似乎与第一组重叠 - 当它不应该 - 该组的位置设置为relative - 因此块对象（父div）应该出现在另一个之下...... 我无法理解这一点:(

Answer 1

传统html定位的相对性受到严重干扰，因为layer_back元素和layer_front元素实际上已移入3d上下文并进行缩放。

为了达到视差效果，这里要做的是：

设置1px透视图（相机设置距离渲染平面1px）。

.parallax {
    perspective: 1px;
}

将背景图层1px更深地移动到视野中，同时将它们缩放到两倍大。

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

^这是视差效果的核心，因为当我们将透视设置为1px时，将元素1px移动得更深，将元素定位为距离相机两倍远的前面层，这些元素被翻译为0。这在滚动时产生视差效果，但也使元素看起来更小，因为它们更远（透视效果）。

这就是为什么它们是比例尺（2），因此它们以原始尺寸显示。

事情是，他们离开了相机而没有改变他们的相对位置（然后他们紧挨着彼此），然后他们就地缩小了<\ n> / strong>，在其中心设置了变换原点的缩放操作，使它们变得更大并且彼此重叠。

解决问题的方法是在缩放之前先将它们彼此远离。

看一下分叉和更新的小提琴，我已经删除了＆＃34; scale（2）＆＃34;在背面层上，它们位于背面，并且它们正确定位（不重叠）。 http://jsfiddle.net/3x150vsx/1/

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

解决问题的方法是在尝试扩大问题之前将它们彼此远离。
祝你好运：＆gt;

视差（相对）层组彼此重叠

1 个答案: