使用position relative时如何将Buttons group固定在footer上方且不修改flex布局

完全不需要修改你现有的display: flex属性和按钮的position: relative设置，只需要给按钮组容器新增固定定位相关样式即可：

新增CSS代码 #

.buttons-group {
    position: fixed;
    /* 偏移值等于footer的总高度，可根据你实际footer的高度调整 */
    bottom: 40px;
    left: 0;
    width: 100%;
    /* 按需调整层级，避免被其他元素遮挡 */
    z-index: 99;
}
.footer {
    /* 保证footer层级高于按钮组，避免被按钮遮挡 */
    z-index: 100;
}

实现说明 #

• 该方案完全保留了你原有代码的所有属性：按钮组的flex布局没有改动，三个按钮依旧平分宽度，按钮本身的relative定位、hover效果都不会受任何影响
• 如果你的footer有自定义内边距，只需要调整.buttons-group的bottom值为footer的实际总高度，即可保证按钮组刚好贴在footer正上方，不会出现重叠
• 如果存在页面底部内容被按钮组和footer遮挡的问题，只需要给body新增padding-bottom属性，值等于按钮组高度+footer总高度即可，比如按钮高度35px、footer高度40px，就设置body {padding-bottom: 75px;}

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