Themes

Mary's Dark Wit Conundrum: What no one told you about z-index

 
It's only an avatar...
Mary's Dark Wit Conundrum: What no one told you about z-index
 
Average of ratings: Useful (4)
Gareth J Barnard
Re: Mary's Dark Wit Conundrum: What no one told you about z-index
Core developersParticularly helpful MoodlersPlugin developers

Ouch!

 
Average of ratings: -
Gareth J Barnard
Re: Mary's Dark Wit Conundrum: What no one told you about z-index
Core developersParticularly helpful MoodlersPlugin developers

...


 
Average of ratings: -
Picture of Danny Wahl
Re: Mary's Dark Wit Conundrum: What no one told you about z-index
Core developersPlugin developers

ah, the long read form of "don't use z-index."

that's seriously a big "what were they thinking?"

 
Average of ratings: -
It's only an avatar...
Re: Mary's Dark Wit Conundrum: What no one told you about z-index
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Danny,

I came across this opacity problem the other day while making a new theme.

The theme is based on Base theme only. It uses Base theme's layouts, and is totally responsive using the same principles employed in the Fluid Standard and Simple themes.

I have a background image which is very 'retro' and bright solid colours in region main and sideblocks, header and footer, which pick out the colours from the body's background image.

I made the header and footer opacity : 0.9; so that the background image shows through the translucent header/footer background colour.

Then I began styling the custommenu.  Here again I employed very basic CSS. But on testing the menu the dropdowns fell behind #page-content. I went searching for z-index in git and did not find anything relevant only one YUI for the menu which was 500 so I made the custom menu 499 thinking that might work. No success!  So I looked at my code and decided to take out the opacity as that was the only things different than Base theme, and the Menu worked fine. I put the opacity back and the menu z-index effect cam e back.

At this point I just could not believe it so I Googled z-index opacity and found that very informative article. smile

I think this is probably why adding 

<param value="#000000" name="bgcolor">
<param value="opaque" name="wmode">

inside an <object></object> tag when adding a swf file works in IE where adding transparent doesn't, because of this z-index effect. 

Cheers

Mary

 
Average of ratings: -
ME
Re: Mary's Dark Wit Conundrum: What no one told you about z-index
Core developers

Did you then end up fixing your issue with an opaque image in the background or an alpha colored background?

 

 
Average of ratings: -
It's only an avatar...
Re: Mary's Dark Wit Conundrum: What no one told you about z-index
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

I left the page-header as it was with the opacity setting and moved the custom menu and navbar out and placed them below the header.

smile

 
Average of ratings: -