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

【问题标题】：how to align/hide/show div ( position: fixed) within in a container?如何在容器中对齐/隐藏/显示 div（位置：固定）？
【发布时间】：2020-07-17 21:02:40
【问题描述】：

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

<div id="header">
  <p>Header</p>
</div>

<div id="container" style="position:relative">
  <div id="leftMenu">
  </div>

  <div id="content" style="overflow-x:hidden;">
    <p>Main content</p>
  </div>

  <div id="overlay" style="height:50px; width:450px; bottom:10px; position:fixed">
  </div>
</div>
<div id="footer">
  <p>Footer</p>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你可以用css完成它

#container {
  height: 150vh;
}

#content {
  position: relative;
  background: green;
}

#overlay {
  background: blue;
  opacity: .5;
  left: 50%;
  transform: translateX(-50%);
}

#footer {
  background: black;
  position: relative;
  display: inline-block;
  width: 100%;
}

<div id="header">
  <p>Header</p>
</div>

<div id="container" style="position:relative">
  <div id="leftMenu">
  </div>

  <div id="content" style="overflow-x:hidden;">
    <p>Main content</p>

  </div>
  <div id="overlay" style="height:50px; width:450px; bottom:10px; position:fixed">
  </div>

</div>
<div id="footer">
  <p>Footer</p>
</div>

【讨论】：

谢谢。如果需要，我会提出一个新问题。我刚刚想到的一件事是，另一个可能的用例是，如果用户单击页面中的任何位置，我可能需要关闭此 div。
这将需要一些 js 但这并不难我敢肯定，如果你在谷歌上看一分钟你就能弄清楚。如果没有，请在 SO 上提出一个新问题 :)
再次感谢。我注意到的另一件事是。在我的叠加 div 中，我有一个按钮。我注意到，当我滚动主要内容并且叠加层位于主要内容区域的顶部时，该按钮是不可点击的，只有当我滚动足够多并且叠加层接近主要内容的末尾时。我可以点击按钮。我们如何处理这种情况，另一个 div 就在更大的 div 之上，并且有一个我们想要点击的按钮。