Question

我有两个div，一个是模态视图，一个是popupmenu，我希望弹出窗口位于模态上方，所以弹出窗口有

z-index:9999999999;
position:fixed;

模态有

z-index:10;
position:fixed;

但是当我点击页面时，我看到的行为好像我点击了模式而不是弹出窗口为什么会发生这种情况？两个div在DOM中处于同一级别，如此

<body>
     <div class="modal-backdrop active">
     <div id="cordova-context-menu-wrapper">
</body>

为什么没有点击弹出窗口？

Snippet似乎在这里工作但不在应用程序中，可能的原因是什么？

.modal-backdrop {
     position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
  
  }

<body>
<div class="modal-backdrop active"><div class="modal-backdrop-bg"></div><div class="modal-wrapper" ng-transclude=""><ion-modal-view style="z-index:9;" class="modal slide-in-up ng-enter active ng-enter-active">
	<ion-header-bar class="bar bar-header bar-positive">
		  <div class="buttons">
		    <button class="button button-icon" ng-click="hideReplyModal()">Save</button>
		  </div>
		  <h1 class="title ng-binding title-left" style="left: 70px; right: 71px;">RE: Yyyhhy</h1>
		  <div class="buttons">
		    <button class="button button-icon" ng-click="sendReply()">Send</button>
		  </div>

    </ion-header-bar>
    <ion-content class="scroll-content ionic-scroll overflow-scroll  has-header" autofocus=""><div class="scroll">

        <div style="padding:15px; height:100%;">
        	<textarea placeholder="Type reply here..." style="font-size: 1.05em; line-height: 1.2em; height: 95%; width: 100%; position: fixed; z-index: 99;" maxlength="50" ng-model="viewTicketsData.reply" class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-maxlength"></textarea>
    		<p id="charctersLeftP" class="ng-binding">32000</p>
    	</div>
    	

       	

        
    </div></ion-content>

</ion-modal-view></div></div>
<div id="cordova-context-menu-wrapper"><style>#cordova-context-menu-wrapper{z-index:9999999999999;position:fixed;top:0;right:0;bottom:25px;width:100vw;height:100vh;margin:0 auto;padding:0;background:rgba(0,0,0,.55)}#cordova-context-menu{display:block;overflow:scroll;overflow-x:hidden;position:absolute;right:0;bottom:25px;left:0;width:100%;max-width:440px;height:auto;max-height:310px;margin:auto;background:#4b4b4b}#cordova-context-menu .cordova-context-menu-entry{display:block;height:60px;width:100%;padding:0 25px;font-size:16px;line-height:60px;color:#fff;cursor:pointer}#cordova-context-menu span{display:block;height:40px;width:100%;padding:0 10px;font-size:18px;line-height:40px;color:#fff;cursor:pointer}#cordova-context-menu .cordova-context-menu-entry:hover{background:rgba(255,255,255,.15)}</style><div id="cordova-context-menu"><span>Title</span><div class="cordova-context-menu-entry" data-id="test">Entry 1</div><div class="cordova-context-menu-entry" data-id="foo">Entry 2</div><div class="cordova-context-menu-entry" data-id="bar">Entry 3</div></div></div>
  </body>

感谢您的帮助

Z-index无法使用div的固定位置

0 个答案: