IE z-index trouble on element with transparent background

Question

everyone. I need 2 absolutely positioned textarea elements to be placed one over the other. Here is my sample:

<div>
  <textarea id="txt1" style="position:absolute; top:0; left:0;z-index:0;background:none;">some text</textarea>
  <textarea id="txt2" style="position:absolute; top:0; left:0;z-index:1;background:none;"></textarea>
</div>

I'm expecting txt1 to be under the txt2. That happens in FF and Chrome. But in IE (tested in 8 and 9) txt1 is clickable and becomes focus.

Does anybody know, how to manage this?

Thanks in advance!

Answer 1

Internet Explorer does not play well with "empty" elements. By making the background: none and having no content, IE treats the top textarea as if it was not there.

To get around this, you can use a transparent png for the background instead:

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

JSFiddle: http://jsfiddle.net/j8Gkd/

Edit

As suggested by @Ryan, you can use data URI to add a transaparent gif to the background, meaning you do not need to create an actual transparent png:

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7"); 

Another solution, as suggested in this answer, is to add a coloured background with full opacity:

background:white; filter:alpha(opacity=1);

Answer 2

That's a very interesting bug that I've never encountered before. IE acts like the block on top isn't even there since it's not rendered visibly.

It strikes me as odd that it works in FF / Webkit because none would be a setting for the background-image property. That should work okay in the shorthand version of the property, but I think it should also leave the background-color set to the default (usually white). In any case, I guess I'm wrong about this. And setting either background or background-color to transparent doesn't fix the problem.

Here's a little bit of a workaround: Rather than specifying background: none, use background-color: rgba(255, 255, 255, 0). That will give you a transparent background. Unfortunately, it only works in IE9.

Answer 3

This bug is still at IE11 emulating to ie 10. A pure css workaround I did was force a background-color and work with:

background-color: #000;
opacity: 0.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; //IE8 Support

Of course I'm forgetting IE7.