как использовать z-index с относительным позиционированием?

У меня проблема с z-index и моим кодом. Я хочу иметь всплывающее окно на каждом ряду, позиционированное относительно этого ряда. Поэтому я создал такой код:

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

со следующим стилем

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}