Search code examples
htmlcssionic-frameworkcss-positionfixed

Unexpected behavior when using a fixed position on a div

My <body /> has a <ion-nav-bar /> and a <ion-nav-view />. Within the <ion-content /> of a <ion-view />, I would like to add a <div /> which takes the whole screen's width and height (i.e. totally covers all other elements), so I added the following style:

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

Oddly, the top of the <div /> does not get to the top of the screen, but to the bottom of the <ion-nav-bar />. Any idea why?

Here is a plunker you can play with: http://plnkr.co/edit/q2iynXaMnTZ2fGqzlJZo. You'll see that the red border does not cover the header. Have a look at the home.html and the style.css files.

I must have misunderstand something about the fixed position, I thought that width a fixed position, an element is positioned relative to the browser window. So where am I wrong? And how to make my fixed <div /> take the whole screen?

Solution

  • Your understanding is correct, however, when you use transform on an ancestor a fixed position descendant is positioned relative to it.

    So because this (ancestor of your fixed element):

    <div style="transform: translate3d(0px, 0px, 0px) scale(1);" class="scroll padding">

    Is using transform, the fixed elements coordinates are relative to the size of this div. If you were to remove the transform, you would get the expected results.