1

I have a screen A and B. Screen A contains my angular app content div, containing a button. Screen B contains backdrop with a modal. Clicking button in screen A makes screen B visible.

I use Angular with an *ngIf to show/hide screen B.

The problem is that when screen B appears (backdrop and modal) the button clicked in screen A appears on top (greater-Z-index-like) of screen B untill something else is clicked. I've tried changing the Z-index of screen B to a high number without luck. Anyone familiar with this behavior? I will add screenshots to illustrate my problem.

enter image description here

The backdrop and modal in screen B are nested divs with the following CSS:

.modalWrapper {
  z-index: 2;
  min-height: 100%;
  position: fixed;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
}
.modalContent {
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.12);
  position: fixed;
  width: 500px;
  min-height: 300px;
  max-height: 415px;
  overflow-y: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 25px;
  z-index: 3;
}
themanwithballs
  • 95
  • 9
  • 1
    z-index along with possible fixed prop have some issues. Refer:https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning – Aravind S Jun 26 '18 at 09:07
  • it seems z-index for the button is higher than the modal – charan kumar Jun 26 '18 at 09:08
  • @charankumar it is not. When clicking once more inside the modal the button then appears behind the modal as it should. I also said in my question that i tried a high Z-index number for screen B. – themanwithballs Jun 26 '18 at 13:07
  • Solved it with an easy fix - HTML stacking order: Placed screen B after screen A in the HTML template and it behaves correctly. Thanks @AravindS – themanwithballs Jun 27 '18 at 08:16
  • @themanwithballs happy to know it helped.. I will add it as an answer, so others can get the benefit of it. – Aravind S Jun 27 '18 at 08:52
  • @themanwithballs: Please check your code I think you are forget to close `.modalWrapper` class in your above code. – Manav Jun 27 '18 at 09:02

1 Answers1

1

z-index along with position fixed prop has some issues. for that know the stacking in HTML.The element is stacking context.if you have two screens A and B means(A and B are children..and A is not inside B), then give z-index higher for B to see it over A.More details are here z-index not working with fixed positioning

Aravind S
  • 2,347
  • 2
  • 12
  • 21