Javascript-форум - div перекрывает элементы формы

привет всем форумчанам!!
возникла на днях проблема с отображением div'а, он сдвигал текстовые поля когда из "скрытого" состояния переходил в "открытое", но хотелось бы чтобы налаживался поверх, пробовал z-index, но безуспешно, может я что-то неправильно делаю?
если кто сталкивался с такой задачей, помогите ее решить:(

P.S. код на jquery, но там только две команды: первая изменяет свойства display этого самого div'a, а вторая пишет в него текст введенный в поле...

вот собственно сам код:

<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.inputText
	{
	  position: relative;
	  font-family:verdana;
	  font-size:17pt;
	  text-align: center;
	  background: #ffc;
	  padding: 2 8px;
      border: 2px solid #396;
	  border-radius: 10px 10px 10px 10px;
	  outline: none;
	  z-index:1; /* ???? */
	}

.outDiv
	{
	  position: relative;
	  font-family:verdana;
	  font-size:17pt;
	  background: #ffc;
	  padding: 2 8px; 
	  border-radius: 10px 10px 10px 10px;
	  outline: none;
	  z-index: 8; /* ???? */
	}
</style>
</head>

<body>

<script type="text/javascript">
// функция отображения введенного текста
function input(id, out)
  {
	$("#"+out+"").css("display", "");  // отображаем div
	$("#"+out+"").html($("#"+id+"").val());	// ложим в него текст
  }
</script>

<table>
	<tr>
	 <td>
	  <input type="text" id="autoText" class="inputText" onkeyup="input(this.id, 'outText');" />
	  <div id="outText" class="outDiv" style="display:none;"></div>
	 </td>
	</tr>
	<tr>
	 <td>
	  <input type="text" id="autoText2" class="inputText" />
	 </td>
	</tr>
	<tr>
	 <td>
	  <input type="text" id="autoText3" class="inputText" />
	 </td>
	</tr>
</table>
</body>

</html>