Javascript 重叠多个图像

我想创建一个由3个图像组成的图像对象

最后一张图片应该是什么样子

有一个文本图像和两个“齿轮”图像

你问我为什么要把它们分开？我想实现一个滚动功能，在向下滚动页面时旋转图像的齿轮

稍后，我希望图像对象始终位于左上角的顶部。这就是我选择相对位置的原因。因为档位必须始终与文字相对

我已经得到了这个函数，但不知怎的，我无法将图像相互堆叠

这就是目前的情况

当前状态

功能旋转（e）{
e、 预防默认值（）；
rot+=e.deltaY*0.5；
leftGear.style.transform=`rotate（${rot}deg）`；
rightGear.style.transform=`rotate（${rot}deg）`；
}
设rot=0；
const leftGear=document.querySelector（“.leftGear”）；
document.body.onwheel=左齿轮。onwheel=旋转；
const rightGear=document.querySelector（“.rightGear”）；
document.body.onwheel=右齿轮。onwheel=旋转
/*使白色图像可见*/
正文{背景：#161924}
.导航标志{
宽度：40px；
高度：40px；
}
.rightGear{
位置：相对位置；
z指数：2；
}
.左齿轮{
位置：相对位置；
z指数：2；
}
.左齿轮img{
显示：块；
}
.rightGear img{
显示：块；
}
您需要将第一个图像包装到另一个div中，然后将所有位置设置为绝对位置。这里有一个例子


.nav标志{
宽度：40px；
高度：40px；
}
.rightGear{
位置：绝对位置；
z指数：2；
}
.左齿轮{
位置：绝对位置；
z指数：2；
}
.左齿轮img{
显示：块；
}
.rightGear img{
显示：块；
}
梅因先生{
位置：绝对位置；
}
您需要将第一个图像包装到另一个div中，然后将所有位置设置为绝对位置。这里有一个例子


.nav标志{
宽度：40px；
高度：40px；
}
.rightGear{
位置：绝对位置；
z指数：2；
}
.左齿轮{
位置：绝对位置；
z指数：2；
}
.左齿轮img{
显示：块；
}
.rightGear img{
显示：块；
}
梅因先生{
位置：绝对位置；
}
您可以在此处使用绝对位置和z索引。


正文{
背景：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.导航标志{
位置：相对位置；
}
.rightGear{
位置：绝对位置；
顶部：12px；
左：3px；
z指数：-1；
}
.左齿轮{
位置：绝对位置；
底部：6px；
右：5px；
z指数：-1；
}

文件
您可以在此处使用绝对位置和z索引。


正文{
背景：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.导航标志{
位置：相对位置；
}
.rightGear{
位置：绝对位置；
顶部：12px；
左：3px；
z指数：-1；
}
.左齿轮{
位置：绝对位置；
底部：6px；
右：5px；
z指数：-1；
}

文件
根据需要，只需移动具有位置属性的齿轮即可。此外，齿轮位于主徽标下方，因此其z指数应低于主徽标

同时将每个档位的高度从40更改为30


正文{
背景：#161924
}
.导航标志{
宽度：40px；
高度：40px；
}
.rightGear{
位置：相对位置；
顶部：-52px；
左：3px；
z指数：-2；
}
.左齿轮{
位置：相对位置；
顶部：-69px；
左：27px；
z指数：-2；
}
.左齿轮img{
显示：块；
}
.rightGear img{
显示：块；
}
根据需要，只需移动具有位置属性的齿轮即可。此外，齿轮位于主徽标下方，因此其z指数应低于主徽标

同时将每个档位的高度从40更改为30


正文{
背景：#161924
}
.导航标志{
宽度：40px；
高度：40px；
}
.rightGear{
位置：相对位置；
顶部：-52px；
左：3px；
z指数：-2；
}
.左齿轮{
位置：相对位置；
顶部：-69px；
左：27px；
z指数：-2；
}
.左齿轮img{
显示：块；
}
.rightGear img{
显示：块；
}

能否共享图像的各个组件，以便我可以尝试以响应的方式执行此操作？您可以尝试对要堆叠的图像类进行
定位：绝对
。添加图像。共享所有图像文件以获得完美解决方案能否共享图像的各个组件，以便我可以尝试以响应性强的方式执行此操作？您可以尝试对要堆叠的图像类执行
position:absolute
。添加图像。共享您的所有图像文件以获得完美的解决方案这是我使用您添加的图像制作的JSFIDLE，它几乎完全符合您的需要。当然，你需要制作两个不同的“齿轮”图像，用它们各自的部分，然后像我那样定位。这是我使用您添加的图像制作的JSFIDLE，它几乎完全符合您的要求。当然，你需要制作两个不同的“齿轮”图像，用它们各自的部分，然后像我那样定位。