css, не могу понять как показать один див выше другого

Не могу ни как понять как div id="popup" показать выше другого блока на странице.

значение z-index не помогает, убрать у .page свойство relative тоже не могу, так как этот блок наезжает на другой в низу (дизайн такой)....

<div class="page"></div> всегда показывается выше чем:

<div id="popup">

   <form></form>

</div>

примерно такая структура кода:

<main role="main">

   <div class="page"></div>

</main>



<footer role="contentinfo">

   <div class="container">

         <div id="popup">

            <form></form>

         </div>

   </div>

</footer>

.page { top: -43px; position: relative; z-index: 7; }



#popup { position: fixed; z-index: 99999; }

#popup form { position: absolute; z-index: 999999999; }