为什么CSS百分比定位配合固定height生效，配合min-height不生效

这个差异是CSS规范的明确要求导致的：
当元素的top/bottom属性使用百分比值时，百分比的计算基准是父元素显式声明的非auto的height属性值。如果父元素的height属性为默认的auto，哪怕通过min-height/max-height把父元素的实际渲染高度固定到了某个数值，浏览器也会判定百分比定位没有合法的参考基准，直接忽略百分比值，等同于设置了top: 0。

对应你给出的两个示例：

• 第一个用min-height的案例里，#home的height属性仍然是默认的auto，所以h1的top: 30%没有计算基准，自然无法完成y轴定位。
• 第二个用固定height的案例里，#home有明确的height: 715px声明，h1的top: 30%会直接基于715px计算得到214.5px的偏移量，定位正常生效。

如果你既需要保留min-height的弹性高度能力，又需要子元素的百分比定位生效，可以用以下两种常用方案：

方案1：给父元素同时设置height: 0和min-height #

#home {
    /* height显式设置为非auto值，满足百分比定位的要求 */
    height: 0;
    min-height: 715px;
    background-color: #F7F8F9;
    margin: 0;
}

#home h1 {
    position: relative;
    left: 6.67%;
    top: 30%;
    width: 70%;
    padding: 0;
    margin: 0;
    z-index: 1;
}

该方案兼容性极强，几乎支持所有主流浏览器，父元素的实际渲染高度仍然会以min-height的数值为准，不会真的变成0高度。

方案2：父元素改用flex布局 #

#home {
    display: flex;
    flex-direction: column;
    min-height: 715px;
    background-color: #F7F8F9;
    margin: 0;
}

flex布局下子元素的百分比定位会默认参考父元素的实际渲染高度，不需要父元素显式声明固定height，适合用弹性布局的项目场景。

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