Overlay guiding full-screen div can not cover tab bar


.overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
top: 0;
left: 0;

html :

  1. I am new to Ionic 3.0. I am working on a school project. I want to design a full-screen guiding div which will “float above” my main page.
  2. The overlay div can not cover tab bar, it seems that tab bar has the highest z-index, which means it can not be covered by anything from subpage.
  3. Do you guys have any experience in solving this problem.


Hi, just had the same problem.
If I put the div outside of my ion-content it worked.

PS: I don’t have a tabbar, just a navbar


hi,did you find the solution?