反应现代日历日期选择器与下面的日期选择器输入重叠

【问题标题】：React modern calendar datepicker Overlaps with datepicker inputs below反应现代日历日期选择器与下面的日期选择器输入重叠
【发布时间】：2021-02-04 01:03:10
【问题描述】：

我在表中使用react-modern-calendar-datepicke。在我的应用程序中，每一行都有日期选择器。当日期选择器从底部打开时，它与下面各行中日期选择器的值重叠。

在沙盒中检查我的示例：Open Sandbox

但是当日历从顶部打开时它可以正常工作。

我尝试更改 z-index，但对我不起作用。有没有人可以解决这个问题？

【问题讨论】：

标签： css reactjs css-selectors

【解决方案1】：

需要改变父元素的位置和z-index。

这是一个简单的演示：（完整代码可以查看底部沙盒）

          <td style={{ position:"relative", zIndex:"999" }}>
            <DatePicker
              value={selectedDay}
              onChange={setSelectedDay}
              inputPlaceholder="Select a day"
              shouldHighlightWeekends
            />
          </td>

我也修改了你的代码，希望对你有帮助！

为您准备的代码示例：

附：这个解决方案也是我在我的项目中使用的。

修复前：

修复后：

希望能帮到你！

【讨论】：