How can I keep elements on top of a backdrop?

ionic-v1
1

Elements like pop-overs and modal windows appear on top of the overlay.
I am now creating a custom element that I want to stay on top of the overlay element but there is nothing about this in the documentation.

Can anyone shed some light on this?

Thanx

2

Just use z-index

.custom-element{
  z-index:100;
}
3

Already tried that but no luck.

Even if it did how would I specify that the controls on that element should not be frozen as the background elements?

4

Can you throw together an example? This why, I know the context your working in

5

I am working on something very similar to this cards demo on codepen
I need the card to stay on top of the backdrop.

6

Anyone managed to solve this? I still need a way to get arround this problem.

7

The Backdrop is appended to the <body> as a sibling of the <ion-nav-view>. That’s why the z-index alone doesn’t help you here.

I made this work by calling $document[0].find( 'body' ).append( element ), so the element is, like a popover or modal, positioned in the DOM after the Backdrop. Now you need to set the element’s z-index > 10 and violá.

Maybe not the most elegant way to do it… well I’m not a pro, yet.

2 Likes