使用 env(safe-area-inset-top) 配合 padding 或 margin 即可让固定定位元素避开刘海屏。在 css 中为 fixed 元素设置顶部内边距，值为 max(env(safe-area-inset-top), 24px)，这样既能适配 iphone x 及以上机型的刘海高度，又能在不支持该属性的旧设备上保持合理的视觉间距。
如何获取当前设备的刘海安全区高度？
通过 CSS 环境变量 env(safe-area-inset-top) 可以直接读取系统定义的安全区域偏移量。这个值由浏览器根据设备硬件自动计算，无需 JavaScript 介入。对于没有刘海屏的设备，该值通常返回 0px；对于有刘海屏的设备，它返回具体的像素值（如 iPhone 13 Pro Max 约为 47px）。
.notch-aware-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
/* 核心代码：利用 env() 获取安全区 */
padding-top: max(env(safe-area-inset-top), 24px);
background-color: #fff;
z-index: 1000;
}上述代码片段展示了最简实现。关键点在于 padding-top 而非 top。如果直接修改 top 属性，会导致内容流被压缩，而使用 padding 则是在固定容器内部增加空白，不影响其他元素的布局逻辑。同时引入 max() 函数是为了防止在某些特殊场景下安全区高度过小导致内容紧贴刘海边缘，24px 是一个经过验证的舒适阈值。
立即学习“前端免费学习笔记（深入）”；
为什么推荐用 padding 而不是 margin 或 top?
使用 margin 可能会触发外边距折叠或影响相邻元素的定位，尤其是在 fixed 元素与其他 absolute 或 relative 元素共存时。使用 top 属性则会改变元素在视口中的绝对位置，可能导致原本设计好的底部对齐失效。相比之下，padding 仅增加元素内部的留白，保持元素边界不变，是最安全的隔离手段。
.alternative-margin-fix {
position: fixed;
top: env(safe-area-inset-top);
left: 0;
right: 0;
height: 60px;
background: blue;
}对比方案显示，若使用 top: env(...)，元素整体下移。虽然视觉上避开了刘海，但如果页面中有其他依赖顶部坐标的元素，这种全局位移会引发连锁反应。因此，除非整个页面都需要基于安全区重排，否则局部隔离推荐使用 padding 方案。此外，需确保 HTML 根节点包含 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，其中 viewport-fit=cover 是启用安全区变量的前提条件。
当刘海屏高度动态变化时如何处理？
在部分 Android 机型或 iOS 横竖屏切换场景中，安全区高度可能发生变化。此时纯 CSS 方案能自动响应，因为 env() 是实时计算的。但需注意，某些老旧浏览器可能不支持 max() 函数或 env() 变量。为了兼容，可以提供一个 fallback 值，例如 padding-top: env(safe-area-inset-top, 24px);，当变量不可用时直接使用默认值 24px。
