Dialog内Datepicker被遮挡问题求助

问题根源 #

你这个问题根本不是z-index层级的问题，是因为你的Dialog设置了overflow-y: scroll——这个属性会把所有超出Dialog容器范围的内容直接裁剪掉，而datepicker的日历弹窗是绝对定位在Dialog内部的，自然会被裁掉。把Dialog设为display:none后，它不再占据布局空间，日历弹窗就不会被它的overflow限制住了。

两种可行解决方案 #

方案1：把滚动移到内部容器，移除Dialog的overflow #

把Dialog上的overflow-y: scroll去掉，只让内容区域（.dialogContent）滚动，这样Dialog本身不会裁剪超出的内容，日历弹窗就能正常显示。

修改后的Dialog代码：

<dialog ng-if="controller.iView" class="rounded" style="position: fixed;width:750px;" id="feDialog">
  <div class="dialogHeader horizontalLayout">
    <span style="width:280px">Text:</span>
    <div class="flex"></div>
    <input type="text" style="width:100px; position: relative;" date-picker class="materialInput" ng-model="controller.date">
    <div class="materialButton colorButton" ng-click="controller.date = controller.getNowDate()">Hoy</div>
  </div>

  <div ng-if="controller.feDialogOpened" class="dialogContent flex verticalLayout" style="overflow-y: scroll; max-height: calc(100vh - 120px);">
    <!-- 这里放你的内容 -->
  </div>
  <div class="buttons horizontalLayout">
    <div class="materialButton" ng-click="controller.closeFeDialog();">Cancelar</div>
    <div class="flex"></div>
    <div class="materialButton disabledButton" ng-if="!controller.isValid()">Guardar</div>
    <div class="materialButton colorButton" ng-if="controller.isValid()" ng-click="controller.setState('state');f.closeFeDialog()">Guardar</div>
  </div>
</dialog>

注：给.dialogContent加个max-height，避免内容过多时撑满整个屏幕

方案2：让Datepicker日历挂载到body上 #

修改datepicker的配置，把日历弹窗的容器指定为body，这样它会脱离Dialog的DOM层级，完全不受Dialog的overflow限制。

在你的datepicker指令里，给datetimepicker添加container: 'body'选项：

$(element)['datetimepicker']({
  format: format,
  endDate: endDate,
  startDate: startDate,
  autoclose: true,
  startView: view,
  minView: minView,
  language: 'es',
  todayBtn: attrs.unknownDate,
  container: 'body' // 新增这一行，将日历挂载到body元素下
});

这两种方案都能解决问题，选哪种看你的布局需求——如果Dialog本身不需要滚动，方案1更简洁；如果Dialog必须保留滚动（比如头部和底部要固定），方案2更合适。

内容的提问来源于stack exchange，提问作者kvothe838