IE8+ CSS z-index (or focus?) issue

[aj_nsc]

This is driving me insane, it appears to be a bug in modern IE versions that hasn't been fixed yet. I saw "appears" because I (and other major browser vendors) may be misinterpreting the spec. This is why I have:

<div class="instant">
  <input type="text" class="suggestion">
  <input type="text" class="search">
</div>

.instant { position: relative; }
.instant input { position: absolute; top:0; left:0; z-index: 2; color: #000;}
.instant input.suggestion { z-index: -1; color: silver;}

The problem I am having is that when I click on the input element visible on the screen (which should mean I am clicking on the .search input element), when I start typing the text is appearing in the .suggestion input element.

This may not be so much a z-index issue as an improper focus issue. If anybody has come across this bug before, I'm dying for a solution that doesn't involve hacks with JS (e.g. when .suggestion is focused on, focus on .search).

Thanks

[Kor]

The problem I am having is that when I click on the input element visible on the screen (which should mean I am clicking on the .search input element), when I start typing the text is appearing in the .suggestion input element.

I can not confirm that bug. Or maybe I did not understand where is that bug to be found.

How did you find out that the text appears on the .suggestion class element? For me, in all the browsers I have tested your code (IE7, IE8, IE9, FF 7, Chrome 15, Opera 11 / Win7 , the entered text is black, that means the value is written in the .search class element, not in the .suggestion

Moreover, when I tested using JavaScript, like:

  <input type="text" class="suggestion" onfocus="alert(this.className)">
  <input type="text" class="search" onfocus="alert(this.className)">

The alert is always, as expected: search, in all the browsers.

[aj_nsc]

Thanks Kor, for pointing that out, I apparently left out a very important part of the CSS that caused the problem, here it is:

			.instant { position: relative; }
			.instant input { position: absolute; top:0; left:0; z-index: 2; color: #000; background: transparent;}
			.instant input.suggestion { z-index: -1; color: silver; background: #fff;}

Now you'll see that when you start typing, the text is silver. For some reason, IE 'focuses-through' input elements with a transparent background.

Can you confirm? Appears like a major bug to me that is still showing itself in ppIE10