CODEWITHSUNDEEP
htmlpositionoverlayz-index
ThatGuyInIT
ThatGuyInIT

Reputation: 2239

Absolutely positioned overlay ignores z-index

I have the following template that I am trying to get working, I have taken the liberty to add different color backgrounds to each div for debugging, basically I have three divs that are different backgrounds and these backgrounds need to have a glow in the center. To do this I tried setting an absolutely positioned container with 10% opacity. However it overlays everything and ignores z-index.

I know I am missing something simple, but I have been looking at this for too long.

http://fwuse.com/n/ No glow, the colors are not the design they are their for debugging. http://fwuse.com/n/glow.html Glow container added, only the menu sticks out, everything else is hidden. http://fwuse.com/n/glow-opacity.html Glow container with opacity, notice none of the links can be clicked.

Upvotes: 0

Views: 2536

Answers (4)

ThatGuyInIT
ThatGuyInIT

Reputation: 2239

I fixed it, I had to set the #pagecontainer z-index and set the background divs to z-index:auto. I set header to z-index: 501, content to z-index: 502 and footer to z-index 503, #glow was set to z-index: 1.

As confusing as this is, it works, any idea why?

http://fwuse.com/no/

Upvotes: 0

Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

#content-bg has a lower z-index than the glow which is covering the whole page, therefore consuming all the clicks for the content. Changing the z-index for #content-bg to 3 seemed to bring it to the front enough to be clicked while not affecting the glow effect.

Upvotes: 0

sniper
sniper

Reputation: 2943

If you can make the content div not have a background color(background:transparent ?) and have z-index 3, and the underlying "10% opacity" div have z-index 2, it will work. I am not sure if background:transparent is a property in CSS however ;)

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77966

Why not just use CSS for your glow?

#radial-center {
  /* fallback */
  background-color: #2F2727;
  background-position: center center;
  background-repeat: no-repeat;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE 10 */ 
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE < 8 Linear gradient fallback */
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";

  /* IE 8/9 Linear gradient fallback */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";
  /* Opera cannot do radial gradients yet */

}

Demo: http://jsfiddle.net/AlienWebguy/49d5g/

Upvotes: 1

Related Questions