Css 具有透明背景的元素上的IE z索引问题

各位。 我需要2个绝对定位的textarea元素，一个放置在另一个上面。 这是我的样本：

<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>

一些文本

我希望txt1在txt2之下。这发生在FF和Chrome中。但在IE中（在8和9中测试），txt1是可点击的，并成为焦点

有人知道怎么处理吗

---

提前谢谢

这是一个非常有趣的bug，我以前从未遇到过。IE的行为就像顶部的块不存在一样，因为它没有呈现出明显的效果

我觉得奇怪的是，它在FF/Webkit中工作，因为

none

将是

背景图像

属性的设置。这在属性的速记版本中应该可以使用，但我认为它还应该将

背景色设置为默认值（通常为白色）。无论如何，我想我错了。将
background
或
background color
设置为
transparent
并不能解决问题

这里有一点解决方法：不要指定
背景：无
，而是使用
背景颜色：rgba（255，255，255，0）
。这将给你一个透明的背景。不幸的是，它只在IE9中工作。
Internet Explorer不能很好地处理“空”元素。通过使
背景：无
且没有内容，即将顶部
文本区域
视为不存在

要解决此问题，可以使用透明png作为背景：

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

JSFiddle：

编辑
正如@Ryan所建议的，您可以使用数据URI将父gif添加到背景中，这意味着您不需要创建实际的透明png：

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

如中所述，另一种解决方案是添加一个完全不透明的彩色背景：

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

这个bug仍然在IE11上模仿IE10。我做的一个纯css解决方案是强制使用背景色并使用：

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

当然我忘了IE7。
试着把两个文本区域分别放在不同的位置div@Michael没问题-我一直使用IE，所以我现在知道了它的大部分缺陷：）不要忘记接受答案，让其他人知道这是一个有效的解决方案提示：你可以使用一个数据URI，其中一个1px x x透明gif可以重复到IE 8。规则如下所示：背景：透明0 0重复滚动url（“数据：image/gif；base64，r0lgodlhaqabaaaaaaap///yh5baeaaaaaaaaaaaaaaaaaaaaaaaaaa7”）@瑞安很漂亮。答案中应该包括它。现在是2014年底，标准人员正在用完全不同的语法（IE还不支持）重写过滤器，我将使用透明图像解决方案，这样我就不会在未来的过滤器语法上遇到问题。我以为IE 10不支持-ms filter？()