javascript - 定位这个内联元素我做错了什么？

Question

我正在使用 jQuery 插件 datepicker在列内显示内联日历元素，但日历被放置在页面的左上角，我不确定我到底做错了什么。

我附上了一张我在屏幕上看到的图片。红色框是我正在使用的两列，我试图在第一列的输入字段下方获取日期选择器。

var datepickerContainer = $('.datepicker-container');
$('.datepicker-input').datepicker({
  autoPick: true,
  inline: true,
  container: datepickerContainer,
});

.datepicker-container {
  border: 1px dashed #eee;
  margin: 10px auto;
  min-height: 160px;
  position: relative;
  display: block;
}

.control-module {
  margin-top: 35px;
}

.activity-feed {
  padding: 15px;
  list-style: none;
}

.feed-module {
  margin-top: 35px;
  float: right;
  border: 1px solid red;
}

.feed-positioning {
  padding: 0 0 0 0!important;
}


/* Date headers */

.date {
  width: 190px;
  position: relative;
  top: -5px;
  color: #8c96a3c0;
  font-size: 13px;
  border-radius: 6px;
}


/* Messages */

.css-message {
  font-size: 15px;
}

.activity-feed>.css-message {
  position: relative;
  margin-left: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  border-left: 2px solid #e4e8ebf6;
}

.css-message:last-child {
  border-color: transparent;
}

.css-message::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #f37167;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>

<div class="row d-flex myclass justify-content-around">

  <div class="p-2 control-module myclass">
    <div class="input-group">
      <input class="datepicker-input">
    </div>

    <div class="datepicker-container"></div>

    <nav class="nav flex-column"></nav>
  </div>

  <div class="d-flex feed-module p-2">

    <ol class="list-of-days">
      <li class="list-group-item list-group-item-info date">
        <h4>Date
          <h4>
      </li>

      <ol class="activity-feed">
        <li class="feed-item css-message">message</li>
      </ol>
    </ol>
  </div>
</div>

Answer 1

您尝试使用的日期选择器似乎将它自己的 css 带到聚会中并将其放置在您选择的容器上:

.datepicker-container {
    background-color: #fff;
    direction: ltr;
    font-size: 12px;
    left: 0;
    line-height: 30px;
    position: fixed;
    top: 0;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 210px;
    z-index: -1;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

包括一些定位属性。

问题是它的 css 在你自己的之后加载，所以它优先。

好处是你有几种方法来修复它，你可以设法在你自己的 css 之前加载它，你可以为你自己的 css 做一个更好的选择器来获得优先权，或者你可以使用 !important 关键字来覆盖您想要的任何属性。

也许还可以查看日期选择器文档，看看是否有禁用它的选项。