在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 為什么div設(shè)置position='relative'后會(huì)覆蓋在position

為什么div設(shè)置position='relative'后會(huì)覆蓋在position='fixed'的div元素上面?

在html文檔中,有一些div需要設(shè)置position='relative',今天需要添加一個(gè)彈框,實(shí)現(xiàn)代碼如下:

  <div class="dialog-wrap" style="width: 400px;">
      <!-- <div class="dialog-cover" v-if="isShow"></div> -->
      <div class="dialog-content" v-if="isShow">
          <div class="dialog-title-wrap">
              <!-- <div class="dialog-title">{{ alertTitle }}</div> -->
              <img class="dialog-close" @click="closeMyself" src="../../assets/imgs/close.svg" alt="">
          </div>          
          
          <div>
            <div class="ipt-wrap">
              <base-input></base-input>
            </div>
            <div class="ipt-wrap">
              <base-input></base-input>
            </div>
            
            <button class="btn">登錄</button>
          </div>
      </div>
  </div>

<style>
.ipt-wrap{
  margin: 20px;
}

.dialog-wrap {
  position: fixed;
  width: 400px;
  overflow: hidden;
  height: auto;
  /* width: 100%;
  height: 100%; */
}
.dialog-cover {
  background: #000;
  opacity: .3;
  position: fixed;
  z-index: 99999999998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dialog-content {   
  width: 400px;
  /* height: 400px; */
  overflow: hidden;
  position: fixed;
  max-height: 200%;
  /* overflow: auto; */
  background: #fff;
  /* top: 18%; */
  z-index: 99999999999;
  /*border: 2px solid #464068;*/
  /*padding: 2%;*/
  /* line-height: 1.6; */
  margin:auto;left:0; right:0;
  /*height: 500px;*/
  border-radius: 2px;
  box-shadow: 1px 1px 50px rgba(0,0,0,.3);

  /*垂直居中*/
  top: 50%;
  transform: translateY(-50%);
}

.dialog-title-wrap{
    position: relative;
    height: 40px;
    /* line-height: 74px; */
    /* background-color: #5e87f5; */
}

.dialog-title{
    font-weight: 900;
    color: #ffffff;
    padding-left: 26px;
}

.dialog-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.dialog-close:hover {
  color: #4fc08d;
}

會(huì)出現(xiàn)如下(紅色箭頭指向的是頁(yè)面上的輸入框,外層套了div,因?yàn)楹竺嫘枰校し?hào),所以input外層div用到了 position='relative'),而彈框用 fiexd 來(lái)定位的,如何處理這種問(wèn)題呢?:

圖片描述

回答
編輯回答
初心

去掉 .dialog-content 里面的 transform: translateY(-50%); 或許你會(huì)有新發(fā)現(xiàn)……

2017年10月12日 11:27
編輯回答
若相惜

給dialog-wrap設(shè)置z-index,值高于外層relative的z-index

2017年2月1日 06:07
編輯回答
陪妳哭

通過(guò)zindex來(lái)控制上下層級(jí)順序吧,雖然沒(méi)看懂你描述什么

2017年7月22日 19:32