OK, this took me some time to figure out and I'm curious to see if anyone else has seen anything like this.
If you use opacity in a div with an id (eg <div id="content"> ) that wraps the page content at all--this could be a global wrapper, or the page content wrapper itself--when you edit a page and click the "maximize" button on CKEditor it will expand but the top row toolbar buttons will go underneath the admin menu as opposed to over the admin menu.
However, if you change the id to a class (eg <div class="content"> ), maximizing CKEditor will work fine.
I even tried it with other themes and changed the id name and the same thing happens as long as the id wraps the page content and has opacity in the css.
Not sure if this will help or not:
I was just reading about the opacity selecter and how it affects all children of the element you are applying that value to. So if CKEditor is in fact a child of your wrapper, you might be applying the opacity value to it as well.
With CSS3 there is now another option although it is not yet globally supported by all of the browsers... RGBA values.
Instead of giving your wrapper a background color of white and setting the opacity to 0.5 (for example), try doing this instead:
RGBA will only be applied to the element you choose (and not its children!)
That makes sense. Because CKEditor becomes a child of the page content when you edit something, thus it causes a problem. It is interesting that it is not a problem if class is used instead of id.
Now we have two solutions.
Guess I'll have to not the opacity thing in the docs somewhere.
Find out more about our Provider Spotlight