怎么实现display-container在button-container正下方

为了实现 `display-container` 在 `button-container` 正下方，你可以按照以下几个步骤配置它们的 CSS 样式：

1. 给 `button-container` 设置一个固定的父级容器 `.parent`，并将 `display-container` 的 `position` 设为 `absolute` 或 `fixed`，相对于这个父级定位。例如：

   .parent {
     position: relative; /* 这样 display-container 可以基于它来定位 */
   }

2. 绝对定位 `display-container`，并设定 `bottom` 属性为 `button-container` 的上边缘距离，加上你需要的间距。假设 `button-container` 的高度为 `height`，则：

   .display-container {
     position: absolute;
     bottom: calc(100% + height + 5px); /* 5px 是你之前提到的底边距 */
     /* 添加其他必要样式 */
   }

这里的 `calc()` 函数用于计算 `display-container` 应该位于 `button-container` 之下多少像素。

3. 如果 `button-container` 的高度是动态变化的，可以尝试使用 JavaScript 监听 `button-container` 的 `resize` 事件，实时更新 `display-container` 的 `bottom` 值。

4. 如果希望在特定条件下（如 `button-container` 被关闭或隐藏）显示 `display-container`，你可以使用JavaScript控制这两个元素的可见性，比如监听 `button-container` 的状态改变事件：

   const buttonContainer = document.querySelector('.button-container');
   buttonContainer.addEventListener('hide', () => {
     // 当 button-container 被隐藏时，显示 display-container
     document.querySelector('.display-container').style.display = 'block';
   });

注意：上述代码示例仅适用于纯CSS，如果你的应用涉及前端框架（如Vue、React等），可能会有更复杂的解决方案来管理组件间的状态和布局。