CSS hover partially behind lower elements - html

Question

I have a situation on a series of forms where I have a hover hint over the input boxes. In a few cases, there is enough text that the hover element wraps to a second line dropping down "over" the next form element below it. The problem is that the hover element actually ends up under rather than over the input box below kind of defeating the purpose.
Any help would be greatly appreciated.
Here is the HTML:
Address1:
" id="address1" />
Your street address.
<div class="field">
<label for="address2">Address2:</label>
<input type="text" class="input" name="address2" value="<?php if ($row_GuestLookup['customer_fname']) { echo $row_GuestLookup['address2']; } ?>" id="address2" />
<p class="hint">Any extra street address information if necessary.</p>
</div>
<div class="field">
<label for="city">City:</label>
<input type="text" class="input" name="city" value="<?php if ($row_GuestLookup['customer_fname']) { echo $row_GuestLookup['city']; } ?>" id="city" />
<p class="hint">Your city.</p>
</div>
And here is the relevant CSS.
#defaultform {
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
.hint{
display: none;
}
.field {
position: relative;
height: 30px;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 375px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

Answer 1

Change the z-index of your hint class like so:
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 375px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
z-index:10000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
Edit:
You may want to use a different value than 10000. I just used that for illustrative purposes.

Answer 2

On .field:hover .hint, you're not getting the benifits of the position: absolute; without specifying a position and value, like top:0px; or the like. I'd suggest making those elements like this:
.field {
position: relative;
height: 30px;
z-index:100;
display:block;
# Just to see if it's collapsing since I can't
# tell if the elements inside are floating too.
float:left;
}
.field:hover .hint {
position: relative;
z-index: 101;
display: block;
margin: -30px 0 0 375px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
Also make sure the elements inside