IE z-index麻烦在有透明背景的元素 [英] IE z-index trouble on element with transparent background

问题描述

大家。
我需要2个绝对定位textarea元素放在一个在另一个。
这是我的样例：

 < div& 
< textarea id =txt1style =position：absolute; top：0; left：0; z-index：0; background：none;> some text< / textarea> 
< textarea id =txt2style =position：absolute; top：0; left：0; z-index：1; background：none;>< / textarea> 
< / div> 
  

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

有人知道，如何管理这个？

提前感谢！

解决方案

Internet Explorer对空元素效果不佳。通过使 background：none 并且没有内容，IE将顶部 textarea 视为不存在。 / p>

为了解决这个问题，您可以使用透明png代替背景：

  background：url（/images/transparent.png）repeat scroll 0 0 transparent; 
  

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

编辑

根据@Ryan的建议，你可以使用数据URI来添加一个transaparent gif到背景，这意味着你不需要创建一个实际的透明png：

  background：transparent 0 0 repeat scroll url（data：image / gif; base64，R0lGODlhAQABAIAAAAAAAP /// yH5BAEAAAAALAAAAAABAAEAAAIBR AA7）; 
  

另一个解决方案，如这个回答，是添加一个全色不透明的彩色背景：

  background：white; filter：alpha（opacity = 1）; 
  

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!

解决方案

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

这篇关于IE z-index麻烦在有透明背景的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！