Javascript 如何在容器中对齐/隐藏/显示div（位置：固定）？

我有一些CSS的HTML页面，比如在一个位置设置为相对的容器div中，我有一个主内容div和覆盖div，覆盖div的位置是固定的，它显示在屏幕底部（视口）上方10px。如何确保它在主内容div中水平居中显示，以及如何隐藏它，以便当用户滚动到底部时，它不会出现在页脚区域，并且在用户滚动回内容区域时可能会重新出现。这可以通过css或javascript实现吗

标题

主要内容

页脚

你可以用css来完成

#容器{
高度：150vh；
}
#内容{
位置：相对位置；
背景：绿色；
}
#覆盖层{
背景：蓝色；
不透明度：.5；
左：50%；
转化：translateX（-50%）；
}
#页脚{
背景：黑色；
位置：相对位置；
显示：内联块；
宽度：100%；
}

标题

主要内容

页脚

谢谢。如果需要，我会提出一个新问题。我刚刚想到的一件事是，另一个可能的用例是，如果用户点击页面中的任何地方，我可能需要关闭这个div。这需要一些js，但这并不难，我相信如果你在谷歌上看一分钟，你就可以找到它。如果没有，就问一个新问题：）再次感谢。我注意到的另一件事是。在我的叠加div中，我有一个按钮。我注意到，当我滚动主要内容时，当覆盖层位于主要内容区域的顶部时，按钮不可点击，只有当我滚动足够多且覆盖层接近主要内容的末尾时，按钮才不可点击。我可以按一下按钮。我们如何处理这样的情况，即另一个div正好位于较大div的顶部，并且有一个我们想要单击的按钮。