Javascript 如何使窗体和按钮在具有z-index-1的div中可编辑？

我得到了一个设计，在一个带有z-

索引：-1的字段中有一个简单的输入字段

但是输入字段是不可编辑的，并且按钮没有反应。我想这和z指数有关。是否有办法使输入字段始终可编辑/聚焦，且按钮始终可单击

这是我拥有的页面的一部分，输入字段和按钮位于backgrounddiv中

另一个div将在输入字段上滚动，但我希望输入字段是可编辑的，并且即使sillioutte在顶部，也可以单击按钮
 
z-index:-1
表单本身不会导致这种情况。单击事件最有可能击中输入顶部的元素

如果不需要用户能够单击该元素（在这种情况下，指针事件将传递到表单），则可以在CSS中对有问题的元素设置
指针事件：none
。不过，我认为最好的解决方案是找出如何将表单放到页面表面。
z-index:1！重要的？我更改了z-index:0，现在只有当其他div不在它前面时它才会反应。但我喜欢输入字段总是可编辑的，请参见bootply链接。我喜欢即使在建筑物后面也可以点击按钮。png图片*我在某处见过它：（因此，我的意思是，只要你能看到指针事件，你就可以与元素进行交互：建筑物上没有指针事件是你的解决方案。建筑物不会识别点击，点击会在它下面的第一件事情上注册。如果你可以将建筑物作为svg而不是图像进行重做，你可能会获得点击以注册为l当元素可见且用户单击表单的可见部分时，该元素可能是由svg路径定义的建筑物的形状。我在这里重新表述了我的问题：