タグでデータピッカーが隠れるバグを回避するには？

　ColdFusionの<cfinput>タグにはカレンダー入力を簡単に作れるtype="datefield"という属性が用意されています。HTML5やJavaScriptを使わなくともカレンダー入力を使えるのは非常に魅力的なんですが、ちょっと困った事が。

　他のブラウザでは特に問題無いんですが、IEで表示させた場合…

　縦に2つ以上このdatefieldを並べてると…

　上のdatefieldでカレンダーを展開された時に下のdatefieldで描画が阻害され、カレンダーの一部が使えなくなっちゃうんです。なんじゃこりゃ〜！！

　…まぁColdFusionのバグでしょうね。IEだけ対応がもれたんでしょう。で、この現象を解決する手法を見つけたのでご紹介。

修正前

<tr height="80">
	<td align="left" valign="middle" nowrap>開始日</td>
	<td align="left" valign="middle" nowrap>
		<CFINPUT type="datefield" mask="yyyy-mm-dd" name="startYmd" value=""><br/><br/>
		(入力形式:「yyyy/mm/dd」 or 「yyyy-mm-dd」)
	</td>
</tr>
<tr height="80">
	<td align="left" valign="middle" nowrap>終了日</td>
	<td align="left" valign="middle" nowrap>
		<CFINPUT type="datefield" mask="yyyy-mm-dd" name="endYmd" value=""><br/><br/>
		(入力形式:「yyyy/mm/dd」 or 「yyyy-mm-dd」)
	</td>
</tr>

修正後

<tr height="80">
	<td align="left" valign="middle" nowrap>開始日</td>
	<td align="left" valign="middle" nowrap>
		<div style="z-index:2; position:relative">
			<CFINPUT type="datefield" mask="yyyy-mm-dd" name="startYmd" value=""><br/><br/>
			(入力形式:「yyyy/mm/dd」 or 「yyyy-mm-dd」)
		</div>
	</td>
</tr>
<tr height="80">
	<td align="left" valign="middle" nowrap>終了日</td>
	<td align="left" valign="middle" nowrap>
		<div style="z-index:1; position:relative">
			<CFINPUT type="datefield" mask="yyyy-mm-dd" name="endYmd" value=""><br/><br/>
			(入力形式:「yyyy/mm/dd」 or 「yyyy-mm-dd」)
		</div>
	</td>
</tr>