是否需要使用“ overflow：auto”在PARENT div外部显示内部DIV？

时间：2018-12-07 18:28:56

标签： css html5

在此处共享演示UI。在此用户界面中，我只想通过使用CSS在父窗口之外显示日历。日历也应该在“提交/取消”按钮div n之外溢出![enter image description here] 1

代码段：

在这里，类date-picker-wrp应该在完整的MODAL框之外。

.modalwindow {
    z-index: auto;
    position: fixed;
    box-shadow: 0 0 20px #333;
    background-color: #fff;
    border-radius: 0;
    overflow: inherit;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}

.zc-form > div {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 550px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}
.zc-form-body {
    max-height: 500px;
    overflow: auto;
    padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input{
    border-radius: 4px;
    line-height: 33px;
    padding: 0 18px 0 15px;
    font-size: 14px;
    color: #2d3138;
    position: relative;
    height: 35px;
    border: solid 0.5px #dedede;
    background-color: #fff;
}

.date-picker-wrp{
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
    width: 100%;
    margin-top: 2px;
}

.datepicker{
    text-align: left;
    padding: 10px 7px;
}

.zc-form-footer{
    height: 85px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 30px;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
    z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
<div>

<div id="winhead" class="mheader ">Create Modal</div>

<section class="zc-form-body">
<div inputs="">
  <div class="font14 mrgT20 posrel">
    <div class="zc-form-input-hdr">
      <span>date</span>
       <span class="clr9 zc-form-hint">Enter the due date</span>
    </div>
    <div class="posrel cur">
      <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
      <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="msi-calndr zcclr font15"></span>
        <span class="msi-close zcclr"></span>
      </span>
      <div class="date-picker-wrp" style="display: block;">
        <div element="calendar" class="date-picker">
          <div class="datepicker" style="display: block;">
            <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>
<footer class="zc-form-footer">
  <div class="w100 h100 dflx fjustifySB">
    <div class="flexC">
      <button class="buttn_pos">Add Task</button>
      <button class="buttn_neg btn evbtn mrgR20">Cancel</button>         </div>
  </div>
</footer>
</div>
</div>

预期结果： 我希望日历dom像下面快捷方式中的下拉菜单一样显示，但是只能通过使用PURE CSS来实现（没有javascript计算） enter image description here

请参考以下JS小提琴链接：https://jsfiddle.net/dilip96025/gzh26fej/28/ 在这里，“国家/地区”下拉列表应位于con类的框之外。

2 个答案:

答案 0 :(得分：0)

就我可以用当前包含的代码重现您的问题，您需要从overflow: hidden中删除.zc-form > div，并从overflow: auto中删除.zc-form-body。您出现问题的原因是overflow: hidden确实隐藏了超出其自身高度和宽度的所有 。

.modalwindow {
  z-index: auto;
  position: fixed;
  box-shadow: 0 0 20px #333;
  background-color: #fff;
  border-radius: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.zc-form > div {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 550px;
  position: relative;
  border-radius: 5px;
}
.zc-form-body {
  max-height: 500px;
  padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input {
  border-radius: 4px;
  line-height: 33px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  color: #2d3138;
  position: relative;
  height: 35px;
  border: solid 0.5px #dedede;
  background-color: #fff;
}

.date-picker-wrp {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
  width: 100%;
  margin-top: 2px;
}

.datepicker {
  text-align: left;
  padding: 10px 7px;
}

.zc-form-footer {
  height: 85px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
  z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
  <div>

    <div id="winhead" class="mheader ">Create Modal</div>

    <section class="zc-form-body">
      <div inputs="">
        <div class="font14 mrgT20 posrel">
          <div class="zc-form-input-hdr">
            <span>date</span>
            <span class="clr9 zc-form-hint">Enter the due date</span>
          </div>
          <div class="posrel cur">
            <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
            <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
          </div>
          <span class="msi-calndr zcclr font15"></span>
          <span class="msi-close zcclr"></span>
          </span>
          <div class="date-picker-wrp" style="display: block;">
            test1<br>
            test2<br>
            test3<br>
            test4<br>
            test5<br>
            test6<br>
            <div element="calendar" class="date-picker">
              <div class="datepicker" style="display: block;">
                <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>
  <footer class="zc-form-footer">
    <div class="w100 h100 dflx fjustifySB">
      <div class="flexC">
        <button class="buttn_pos">Add Task</button>
        <button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
    </div>
  </footer>
</div>
</div>

编辑：回答评论的第二个代码段。

.modalwindow {
  z-index: auto;
  position: fixed;
  box-shadow: 0 0 20px #333;
  background-color: #fff;
  border-radius: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.zc-form > div {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 550px;
  position: relative;
  border-radius: 5px;
}
.zc-form-body {
  max-height: 500px;
  overflow: auto;
  padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input {
  border-radius: 4px;
  line-height: 33px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  color: #2d3138;
  position: relative;
  height: 35px;
  border: solid 0.5px #dedede;
  background-color: #fff;
}

.date-picker-wrp {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
  width: 100%;
  margin-top: 2px;
}

.datepicker {
  text-align: left;
  padding: 10px 7px;
}

.zc-form-footer {
  height: 85px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
  z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
  <div>

    <div id="winhead" class="mheader ">Create Modal</div>

    <section class="zc-form-body">
      <div inputs="">
        <div class="font14 mrgT20 posrel">
          <div class="zc-form-input-hdr">
            <span>date</span>
            <span class="clr9 zc-form-hint">Enter the due date</span>
          </div>
          <div class="posrel cur">
            <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
            <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
          </div>
          <span class="msi-calndr zcclr font15"></span>
          <span class="msi-close zcclr"></span>
          </span>
          <div class="date-picker-wrp" style="display: block;">
            test1<br>
            test2<br>
            test3<br>
            test4<br>
            test5<br>
            test6<br>
            <div element="calendar" class="date-picker">
              <div class="datepicker" style="display: block;">
                <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>
  <footer class="zc-form-footer">
    <div class="w100 h100 dflx fjustifySB">
      <div class="flexC">
        <button class="buttn_pos">Add Task</button>
        <button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
    </div>
  </footer>
</div>
</div>

答案 1 :(得分：-1)

在日历的CSS中添加“ z-index：1000” 例如：

<div class="calendar" style="z-index:1000"></div>

相关问题
最新问题