javascript - Trying to Mask a Page: Postion Absolute & fixed ruin formatting -

i'm trying create loading image masks page (when call made).

i'm using handlebars, html, css, , javascript.

i have .hbs page looks this:

<div id="spinner"></div> <div class="special-container"></div> <div class="special-container"></div> 

which filled in javascript puts content each of above containers, spinner , special-container. (made names forgive me if there ever typo)

what pushed spinner div following:

<div id="mask">     <div id="spinner">         hello world spinner page         <span class="icon icon-house margin-right-10" ></span>     </div> </div> 

i have .less file contains css. looks this:

.special-container {   max-width: 1170px;   position:absolute; // have tried position:fixed; }  #spinner {   position: relative;   z-index: 100; } 

when render page above code first div (spinner) above 2 other divs on top of each other. if change css this:

.special-container {   max-width: 1170px; }  #spinner { } 

i spinner above special-container (1, first one) above 2nd special-container. design desire special containers not want spinner. want spinner in middle of page , want resizable page (if didn't require this, think might able fix problem setting top, bottom, , other size parameters in css).

without positioning: spinner div2 div3

with positioning spinner/div2/div3 spinner on top , div2 , div3 dramatically smaller , on top of 1 another.

i looked @ this: z-index not working fixed positioning states need each div have position. works asker there not work me (everything ends on top of each other instead of spinner being on top of formatted 2 other divs)

it works far spinner rendered on top of div2 , div3. problem can't seem figure out why div2 , div3 stop being rendered 1 after other , instead shrink in size(vastly) , on top of 1 another.

why position cause this? can it?

if didn't force size, why position alter it? can it?

solution:

the key remove z-index page. rather inserted divs in child of spinner.

so inside spinner have html this:

<div id="mask">      <div id="innerobj"> </div></div>  

i removed following css:

.special-container {   max-width: 1170px;   position:absolute; // have tried position:fixed; }  #spinner {   position: relative;   z-index: 100; } 

and replaced css inner children

#mask {   position: fixed;   z-index: 1;   background: rgba(192,192,192,0.3);  } #innerobj {   position: relative;   z-index: 100; } 

this works great.