如何让三个按钮固定在div上方且各占div宽度的1/3？

按钮消失的核心原因是父div没有设置position: relative——绝对定位元素会寻找最近的非static定位父级作为参照，如果父div是默认的position: static，按钮会相对于body定位，很容易跑到视口外导致看不见。

下面是可行的实现方案，兼顾“始终在div上方”和“每个按钮占div宽度1/3”的需求：

实现代码 #

<div class="parent-box">
  <div class="button-group">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>
  <div class="content">
    <!-- 这里是div的内容 -->
    测试内容区域
  </div>
</div>

.parent-box {
  position: relative; /* 关键：让内部绝对定位元素以它为参照 */
  width: 400px; /* 示例宽度，可根据需求调整 */
  height: 200px;
  border: 1px solid #ccc;
  margin: 50px auto; /* 示例间距，方便查看效果 */
}

.button-group {
  position: absolute;
  top: -40px; /* 根据按钮高度调整，刚好在父div上方 */
  left: 0;
  width: 100%;
  display: flex; /* 用flex布局均匀分配宽度 */
}

.button-group button {
  flex: 1; /* 每个按钮平分父容器宽度，自动占1/3 */
  height: 40px;
  border: none;
  background: #4285f4;
  color: #fff;
  cursor: pointer;
}

.button-group button:not(:last-child) {
  border-right: 1px solid #fff; /* 按钮间加分隔线 */
}

.content {
  padding: 20px;
}

关键说明 #

• 父容器parent-box必须设置position: relative，确保按钮组的绝对定位是相对于它的。
• 使用flex: 1让按钮自动平分宽度，比硬写33.333%更灵活，不会出现小数精度导致的间隙问题。
• top的值可以根据按钮的高度调整，保证按钮完全在父div上方且不重叠。

内容的提问来源于stack exchange，提问作者Mfa