Why does div override the div element of position=’fixed’ after setting position=’relative’?

  css3, question

In html documents, there are some divs that need to be set upposition='relative', today need to add a bullet box, the implementation code is as follows:

<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 "> login < /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);
 
 /* Vertical Center */
 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;
 }

The following will appear (the red arrow points to the input box on the page, and the outer layer is covered with div. Because the sign of $ is required, the outer layer div of Input uses position=’relative’), while the bullet box is positioned with fiexd. How to deal with this problem? :

图片描述

Set z-index to dialog-wrap with a value higher than the z-index of the outer relative.