Javascript 按钮在固定位置div内变为无响应

我使用的是

#缩放控件上的固定位置

，因此当我滚动时，

按钮将保持在屏幕顶部。在我将
position:fixed
添加到
div
之前，按钮起作用，但是如果我添加
position:fixed
按钮将变得无响应

在fiddlejs上使用它之后，我发现如果删除了
svg
，它是buttons div的兄弟，那么即使div是固定的，按钮也可以工作。我需要
svg
留下来

下面是带有
svg
和
位置的代码：fixed
-因此它不工作：


var butt=document.getElementById（'zoom_in'）；
butt.addEventListener（'click'，（）=>{
var body=document.getElementById（'body'）；
var p=document.createElement（'p'）；
p、 text内容='按下'；
体感儿童（p）；
});
.draggable{
光标：移动；
}
.pdf网页画布{
显示：块；
保证金：5px自动；
边框：1px实心rgba（0,0,0,0.2）；
z指数：0；
}
.帆布箱{
宽度：100%；
/*身高：100%*/
z指数：0；
位置：绝对位置；
}
#svg{
位置：绝对位置；
z指数：1；
}

+
您的按钮容器位于所有内容的下方。向它添加
z-index
，它就会工作


.draggable{
光标：移动；
}
.pdf网页画布{
显示：块；
保证金：5px自动；
边框：1px实心rgba（0,0,0,0.2）；
z指数：0；
}
.帆布箱{
宽度：100%；
/*身高：100%*/
z指数：0；
位置：绝对位置；
}
#缩放控件{
z指数：3；
}
#svg{
位置：绝对位置；
z指数：1；
}

+
非常感谢您的快速响应