Absolutely positioned overlay ignores z-index
I have开发者_StackOverflow中文版 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.
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/
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 ;)
#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.
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/
精彩评论