The problem is the stacking context. The :after
content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1
works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 }
is nr. 2 in the list.
Your only option would be using an additional wrapper:
<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>
moving your current styles for .turnIntoOverlay
to .turnIntoOverlay > div
and applying the overlay to the outer div with a positive z-index
:
.turnIntoOverlay:after {
z-index: 1;
}
Here is a demo.
Unfortunately IE8 and below are buggy on that. Also they do not know opacity
and using -ms-filter
does not work on elements without layout like pseudo classes :before
and :after
are.
Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color
. No need for :after
then:
.turnIntoOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: skyblue; /* for old browsers */
background-color: rgba(135, 206, 235, 0.4);
}
Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).
Here is a demo.