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

【问题标题】：How to make element positioned according to another element?如何使元素根据另一个元素定位？
【发布时间】：2019-12-10 11:32:17
【问题描述】：

我在一个完整日历上方有一个日历图标，当我点击该图标时，会出现一个 react-datepicker。

我的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;
}

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

当我运行它时，我得到：

我希望 react-datepicker 完全出现。

我该如何解决？

【问题讨论】：

我认为，在 css 的某个时刻，您在剪切日历的父元素中应用了一个溢出隐藏。或者下表具有更高的 z-index。没有一个简短的独立示例很难说
@fcalderan 我该如何解决？
分享一个显示问题的代码 sn-p 作为第一步可能很有用
@fcalderan 我编辑了我的帖子，添加了代码沙箱codesandbox.io/s/fullcalendar-react-tqdng

标签： css fullcalendar css-position react-datepicker

【解决方案1】：

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

我在 style.css 中添加了这个，它成功了：

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

【讨论】：

【解决方案2】：

确保：

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

【讨论】：

我尝试添加溢出：隐藏，但它不起作用。我通过添加代码沙箱codesandbox.io/s/fullcalendar-react-tqdng 编辑了我的帖子