如何使元素根据另一个元素定位？

Question

我在全日历上面有一个日历图标，当我点击该图标时，会出现一个反应日期选择器。

我的 css :

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  top: -42.5px;
  right: -43px;
}

我的 codesandbox 是：https://codesandbox.io/s/fullcalendar-react-tqdng

当我运行它时，我得到：

我希望react-datepicker能完整的出现

我该如何解决？

Answer 1

确保：

日历的父级的 z-index 高于下面的任何内容并且没有溢出：隐藏
日历下方的内容没有变换或不透明度（这会影响堆叠顺序）
如果 Calendar 和下面的内容都是兄弟，请确保 Calendar 具有更高的 z-index

Answer 2

这可能是因为完整日历的z-index高于日期选择器或日期选择器低于完整日历。

我在 style.css 中添加了这个，它起到了作用：

.fc {
    position: relative;
    z-index: 0;
}

如何使元素根据另一个元素定位？

How to make element positioned according to another element?

css

fullcalendar

css-position

react-datepicker