为什么div设置position='relative'后会覆盖在position='fixed'的div元素上面？

Question

在html文档中，有一些div需要设置position='relative'，今天需要添加一个弹框，实现代码如下：

  <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;
}

会出现如下（红色箭头指向的是页面上的输入框，外层套了div，因为后面需要有￥符号，所以input外层div用到了 position='relative'），而弹框用 fiexd 来定位的，如何处理这种问题呢？：

Answer 1

给dialog-wrap设置z-index，值高于外层relative的z-index

Answer 2

通过zindex来控制上下层级顺序吧，虽然没看懂你描述什么

Answer 3

去掉 .dialog-content 里面的 transform: translateY(-50%); 或许你会有新发现……