为什么模态背景与我的弹出模态重叠甚至设置了 !important 和 z-index？ 如何解决？

Question

I had a successful message popup. Now I want to add a semi-transparent backdrop layer underneath with rgba(0,0,0,0.5) , that I used CSS ::before . But the backdrop ::before { rgba(0,0,0,0.5) } seems to overlap my green popup, even when I set z-index and background: !important for the popup.

Here's the code I've tried

 .alertMessageModal{ width:auto; height:auto; border-radius:10px; display:inline-block; position:fixed; top:20px; right:25px; color:#fff; padding:10px 15px; padding-bottom:15px; z-index:100; background:green !important;} .alertMessageModal::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:-100;} .alertMessageModal .modal-title{ font-size:15px; float:left; line-height:18px;} .alertMessageModal .close{ float:right; margin-left:10px; line-height: 15px; color:#fff;}

 <div class="alertMessageModal bg-success"> <h4 class="modal-title">Your message has been successfully sent</h4> <button type="button" class="close">&times;</button> </div>

Answer 1

You need to wrap the modal's content inside another extra wrapper div .modal-content . The example from w3school .

Your code doesn't work as expected because z index not working with fixed positioning

Here's the working code, I changed a few lines of code from yours:

 /* renamed from .alertMessageModel::before */ .alertMessageModal { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -100; } /* renamed from .alertMessageModal */ .modal-content { width: auto; height: auto; border-radius: 10px; display: inline-block; position: fixed; top: 20px; right: 25px; color: #fff; padding: 10px 15px; padding-bottom: 15px; z-index: 100; background: green !important; } .alertMessageModal .modal-title { font-size: 15px; float: left; line-height: 18px; } .alertMessageModal .close { float: right; margin-left: 10px; line-height: 15px; color: #fff; }

 <div class="alertMessageModal bg-success"> <!-- added an extra div --> <div class="modal-content"> <h4 class="modal-title">Your message has been successfully sent</h4> <button type="button" class="close">&times;</button> </div> </div>