last day (15 days later) » 

11:12 PM
1
A: Use CSS and z-index to create a page overlay, then place one element on top of the overlay

Josh BurgessWoo boy. This one's fun. So you've fallen into the old stacking context problem. In short, what you're trying to do, you can't do. Fiddle incoming! In this fiddle: We change some CSS .container { background: red; height: 100px; position: relative; } .inner { z-index: 99999;...

 
The tricky part is I'm trying to highlight a button (and other elements) on a real webapp, which means they are deeply nested in other HTML parts of the page
 
Ah, cool, alright. I'll fix it with a fiddle, then.
@DonnyP - Edited up accordingly, more explanations forthcoming.
 
Thanks for the effort Josh - really appreciate it. The jsfiddle with your method doesn't seem to work though
 
Sure it does, at least in Chrome (where I'm currently working). Here's an example with the opacity of your top box set to 1: jsfiddle.net/4ne83oa4/5
Wait a second, in your original question, what browser are you using? - jsfiddle.net/4ne83oa4/7 That's the original fiddle with some color and formatting changes to make the .inner element less ambiguously colored.
 
Ahhh, it does work! My bad, I didn't realize that the blue was behind the green now, not overlaying it. I'm using Chrome :)
 
11:12 PM
Your original worked.
I'll delete my answer, as the W3C for CSS3 was updated, and I'm operating on an incorrect assumption.
 
whoa wait - my original worked?
.... when did that happen
 
Sure did.
Change your opacity to 1 on the overlay.
Then check it out.
I think it was a coloring issue.
 
ya... ha
well thanks for the help anyway!
 
Anytime.
 

last day (15 days later) »