Laydate 日期组件随页面滚动偏移？CSS 固定定位一招搞定

问题现象

在弹出层中使用 Laydate 日期选择器时，当用户滚动底层页面，日期面板会跟随滚动而位移，导致 UI 体验极差。截图中红框区域展示了该异常行为：

核心原因

Laydate 默认采用绝对定位 (position: absolute)，其坐标相对于最近的非 static 定位祖先元素计算。当页面滚动时，参考坐标系发生变化，导致面板位置偏移。

CSS 修复方案

强制日期面板容器使用 固定定位 (position: fixed)，使其相对于视口定位，不受页面滚动影响：

.laydate-icon {
    position: fixed !important;
    z-index: 9999; /* 确保层级最高 */
}

若组件通过 JS 动态生成，可在初始化后注入样式：

laydate.render({
    elem: '#dateInput',
    done: function(value, date, endDate) {
        document.querySelector('.layui-laydate').style.position = 'fixed';
    }
});

定位机制对比

注意事项

• 固定定位元素脱离文档流，需确保 z-index 足够高避免被遮挡
• 移动端需测试虚拟键盘弹出时的定位表现
• 若弹出层本身可滚动，需结合 transform 或 overflow 处理嵌套滚动场景