Question

我正在创建一个网络应用程序，我想从文本框中选择日期位于模态，当我点击文本框日期（材料设计）出现在模态后面时，我知道这是因为我需要设置z-index

我尝试了以下示例，但我没有成功

<style>
    .modal{
        position:relative;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:1;
}
</style>

模态未打开

<style>
    .modal{
        position:absolute;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:2;
}
</style>

模态背后的内容正在出现

<style>
    .modal{
        position:absolute;
        z-index:10000;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

日期没有出现在我的模态函数innappropriateky的模态和样式背后

<style>
    .modal{
        position:fixed;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

模态背后的内容正在出现

这是我如何声明模态和文本框（在模态体内）

<div id="update" class="modal fade" role="dialog" >

文本框

<div class="form-clearify">
    <div class="row" style="margin-top:3px;">
        <div class="col-md-12 col-sm-12 col-xs-12" style="background-color:whitesmoke;">
            <label>Select Date </label>
            <md-datepicker class="calsen" ng-model="mddate" ng-change="dateformatechanged()" md-placeholder="Enter date"></md-datepicker>
        </div>
    </div>
</div>

我现在需要做什么？

Answer 1

试试这个：

CSS：

.md-datepicker-calendar-pane {
  z-index: 1200;
}

Answer 2

我会使你的日期选择器的z-index更高，而不是乱用modal z-index。（这可能会破坏别的东西）

带z-index css的bootstrap模态

2 个答案: