Weird ios behaviour when absolute and z-index are involved

Question

I have a menu that should be in the home-page which is like this:

<nav class="main-menu"></nav>

And the main-menu css is a simple:

.main-menu {
  height: 30%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 11;
}

When in ios (after cordova compiling), i dont see the nav at all. Inside of the nav i have 3 very big buttons, and when i press on the ios screen (where the nav bar is supposed to be but not shown to me), it redirects me to where i want as if the nav is there but i just dont see it, What can be the cause of this weird behaviour?

Answer 1

Have you set your html / body CSS like this?

html, body {
    height: 100%;
}

If not, you won't be able to use percentage for height values (relative to the screen size, this is). You can set the height to some pixel value, which will also work.

Although this may be a z-index issue. Try setting z-index to 9999 and see if it is visible.