Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
954 views
in Technique[技术] by (71.8m points)

css - IE z-index trouble on element with transparent background

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...