I am new to using relative position in CSS. I am struggling with the html below. I am running this in IE8. The issue that I am having is to get my cursor to focus on the text box I have to position it over the top border. 

Update: The note above was somewhat resolved by adding z-index to the right div. What I didn't originally include in my question was that the contents in the left div are assigned to be jQuery draggable and the input text box is a droppable. I want users to be able to be able to drag in values or enter them on their own. When z-index is added to the rightDiv, the focus on the text box to allow the user to manually type in an entry works great, but when an entry from the leftDiv is dragged over to the text box it is hidden behind the text box until the drop is complete.

Any suggestions? Thanks for your help.

```
<html>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<head>
<style>
.rightDiv {
  position : fixed;
  top:90px;
  left:198px;
}
.leftDiv {
  position : relative;
  right : -10px;
  top:10px;
}
</style>
</head>
<body>
<form>
<DIV class=rightDiv>
<INPUT size=10></INPUT>
</DIV>
<DIV class=leftDiv>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
</DIV>
</form>
</body>
</html>

```