Div not coming over header

ionic-v1
1

Hi,

I need to show a demo screen to the user which actually depicts what the user can do on any particular screen. Like guidelines.

I have an image for that and that has to cover the whole screen on press of some Help button.

The problem is that no matter how high I give the z-index to the div containing the image, it does not cover the header.

Any reason why ? In any case, how do I achieve this i.e. cover the whole view and header by another div.

The structure of the code is -

<ion-header></ion-header>
<ion-view>
<div class="this-is-the-translucent-div" style="z-index: 15">
<img/>
</div>
</ion-view>
2

Hey, you can take a look how ionic handles the backdrop for modals and popups.

Put you div at the end of you html body -> add css position absolute -> hide and show it like you want.

3

Actually I do not (read can not :stuck_out_tongue: ) change my html. Any other way that you can think of or anybody for that matter, do share

4

repositionate/set style settings via Javascript afterwards?

Or do you can only change css or what? Oo

5

repositionate/set style settings via Javascript afterwards? Didn’t try that, but will come back

Or do you can only change css or what? No restrictions on that for sure :stuck_out_tongue:

6

If I set the z-index with javascript also, it does not go over the header.

7

Yeah how i said.
You need the div on the same level like the headerbar is (like siblings).
I think the ion-view/ion-content has position: relative so every absolute positionated element inside will be absolute positionate relative to its parent.

Maybe you can append your div via javascript or move it, .eg. at the end of the body.
Then add position absolute. and use style attributes like top, left to set correct position.

Greetz.

8

Yeah I tried that way and it worked. Thanks :smile:

1 Like