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

Question

I'm trying to create a loading image that masks a page (when a call is made).

I'm using handlebars, html, css, and javascript.

I have a .hbs page that looks something like this:

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

Which is filled in with some javascript which puts content into each of the above containers, spinner and special-container. (made up names forgive me if there is ever a typo)

What is pushed into the spinner div is the following:

<div id="mask">
    <div id="spinner">
        Hello world I am the spinner page
        <span class="icon icon-house margin-right-10" ></span>
    </div>
</div>

I have a .less file that contains my css. Which looks something like this:

.special-container {
  max-width: 1170px;
  position:absolute; // I have also tried position:fixed;
}

#spinner {
  position: relative;
  z-index: 100;
}

When I render my page with the above code I get the first div (spinner) above the two other divs which are on top of each other. If I change the css to this:

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

#spinner {
}

I get the spinner above special-container (1, the first one) which is above the 2nd special-container. Which is the design I desire for the special containers but is not what I want for the spinner. I want the spinner in the middle of the page and I want it to be resizable with the page (If i didn't require this, I think I might be able to fix my problem by setting top, bottom, and other size parameters in the css).

Without positioning: spinner div2 div3

With positioning spinner/div2/div3 where spinner on top and div2 and div3 are now dramatically smaller and on top of one another.

I looked at this: z-index not working with fixed positioning which states that I need each div to have a position. But what works for the asker there does not work for me (everything ends up on top of each other instead of spinner being on top of the properly formatted 2 other divs)

It works so far as that spinner is rendered on top of div2 and div3. The problem is I can't seem to figure out why div2 and div3 stop being rendered one after the other and instead they shrink in size(vastly) and are on top of one another.

Why does position cause this? What can I do about it?

If I didn't force size, why does position alter it? What can I do about it?

score 0 · Accepted Answer · answered Apr 10 '15 at 22:51

Solution:

The key is to remove the z-index from this page. Rather I inserted it into divs in the child of spinner.

So inside spinner I have html like this:

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

I removed the following css:

.special-container {
  max-width: 1170px;
  position:absolute; // I have also tried position:fixed;
}

#spinner {
  position: relative;
  z-index: 100;
}

and replaced it with css for the inner children

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

}
#innerObj {
  position: relative;
  z-index: 100;
}

This works great.

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

1 Answers1