Html Div内的居中按钮，位于其他居中文本下方

我正在创建一个外观相对简单的网站。有一堆div，每个div都填充了一张图片，下面包含一些文本和按钮

虽然我肯定有人问过一个非常类似的问题，但我觉得好像我已经尝试了每一个选项。我目前只是将它设置为绝对位置，尽管我尝试了多种不同的布局和选项。我是一个合理的网页设计新手，我不会怀疑我是否只是错过了一步，使其他一些选择的工作。网站只需要有响应性

#您的店铺{
高度：500px；
宽度：自动；
位置：相对位置；
文本对齐：居中；
背景色：黑色；
文本对齐：居中；
}
#你的商店{
不透明度：0.35；
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
#食物钮扣{
显示：块；
位置：绝对位置；
最高：75%；
左：30%；
}
#食物{
左边距：100px；
}
#食物按钮。fbut:悬停{
背景色：#a8652b；
盒影：0 12px 16px 0 rgba（0,0,0,0.24），0 17px 50px 0 rgba（0,0,0,0.19）；
}
#食物的钮扣{
背景色：rgb（56.5,35.2,20.5）；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
}

你的咖啡店
学生拥有和经营

从

#buttonsforfood

元素中删除绝对位置会导致按钮显示在居中文本下方。我只是删除了以下属性：

#buttonsforfood
{
    position: absolute;
    top: 75%;
    left: 30%;
}

这些属性正在将您的

#buttonsforfood

从DOM中的预期位置（居中文本下方）移开

结果如下：

#您的店铺
{
高度：500px；
宽度：自动；
位置：相对位置；
文本对齐：居中；
背景色：黑色；
文本对齐：居中；
}
#你的商店
{
不透明度：0.35；
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
#食物钮扣
{
显示：块；
}
#食物
{
左边距：100px；
}
#食物按钮。fbut:悬停{
背景色：#a8652b；
盒影：0 12像素16像素0 rgba（0,0,0,0.24），0 17像素50像素0 rgba（0,0,0,0.19）；
}
#食物的钮扣{
背景色：rgb（56.5,35.2,20.5）；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
}

你的咖啡店
学生拥有和经营

执行此操作时，按钮将完全消失。我猜想在图像下，即使添加了一个大的z索引，它们仍然不可见。