CSS垂直堆叠元素最佳实践：导航按钮下半部分定位问题

要实现标题和按钮垂直堆叠，且按钮位于home-jumbo下半部分，你需要调整home-jumbo的Flex布局属性，同时给按钮容器设置定位样式，具体修改如下：

1. 调整home-jumbo的Flex布局 #

将默认的横向Flex改为垂直方向，同时调整内容的垂直分布逻辑：

.home-jumbo {
    width: 80%;
    height: 75%;
    display: flex;
    flex-direction: column; /* 改为垂直排列子元素 */
    justify-content: flex-start; /* 内容从容器顶部开始排布 */
    align-items: center; /* 子元素保持水平居中 */
    margin: auto;
    box-shadow: 0px 1px 3px 0px;
    border-radius: 1%;
    background-image: url("/public/img/home-bg.jpg");
    background-size: cover;
    padding-top: 5%; /* 可选：给标题顶部加内边距，避免紧贴容器顶部 */
}

2. 定位按钮到容器下半部分 #

利用Flex的自动外边距特性，把按钮容器推到容器的底部区域：

.jumbo-btns {
    margin-top: auto; /* 自动占据上方剩余空间，将按钮推至容器下半部分 */
    margin-bottom: 5%; /* 可选：给按钮底部加外边距，避免紧贴容器底部 */
    display: flex; /* 让两个按钮横向排列（可根据需求调整） */
    gap: 1rem; /* 设置按钮之间的间距 */
}

3. 优化按钮样式（可选） #

给单个按钮添加基础样式，提升视觉交互效果：

.jumbo-btn {
    padding: 0.8rem 1.5rem;
    background-color: #2563eb; /* 示例蓝色，可自行替换 */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.jumbo-btn:hover {
    background-color: #1d4ed8; /* 示例 hover 深色，可自行替换 */
}

之前单独设置jumbo-btns样式未生效，核心原因是home-jumbo默认的横向Flex布局让标题和按钮并排，导致按钮容器的定位样式无法体现预期效果。调整后标题会处于home-jumbo上半区域，按钮则被固定到下半部分，完全符合需求。

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