Disable overflow hidden on ion-footer and ion-header in Ionic 3 Framework

Question

I have been working on an app in ionic3. I have created a ion-footer with buttons. I need to pop out a middle button but ion-footer is hiding it like it has CSS overflow: hidden applied on it.

I want to make my ion-footer something like this:

but getting this:

What I'm trying is:

.middle-nav-icon {
        color: $appRed;
        border: $appRed 1px solid;
        width: 55px;
        height: 55px;
        line-height: 55px;
        border-radius: 50%;
        background: #ffffff;
        font-size: 30px;
        margin-top: -50px;
        margin-bottom: 7px;
      }

Answer 1

You should use z-index in your CSS. It define the importance (priority) of each div. If you put a big z-index the div will be push up and appear in the top of the div's stack. You may consult the documentation .

Try something like this:

.middle-nav-icon {
        color: $appRed;
        border: $appRed 1px solid;
        width: 55px;
        height: 55px;
        line-height: 55px;
        border-radius: 50%;
        background: #ffffff;
        font-size: 30px;
        margin-top: -50px;
        margin-bottom: 7px;
        z-index: 1;
      }