css - 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);