абсолютное позиционирование внутри таблицы

Мне нужно позиционировать что-то с абсолютным позиционированием внутри td. Чтобы обойти тот факт, что td не определен при установке его в относительное значение, я использую относительный div внутри моего td, а затем внутри этого div у меня есть внутренний div, установленный на absolute. Все это отлично работает, когда у меня есть контент, заполняющий тд. Когда я устанавливаю содержимое td на отображение none, тогда абсолютное позиционирование оказывается испорченным.

Кто-нибудь знает, почему это должно быть.

HTML:

    

        

            

                

                    
A
                
            
            

            

        
        

          

             

               
B
           
           
           

           

        
    

И CSS:

td{
    border:1px solid red;
    width:100px;
    height:60px;
    vertical-align:bottom;
}

.slot{
  width:100px;
  height:29px;
  background-color:#999;
  border:1px dashed blue;
}

.relative{
    position:relative;
}

.absolute{
    position:absolute;
    top:5px;
    left:5px;
}
.hidden{
    display:none;
}

И живая версия: http://jsfiddle.net/HgEtQ/

В скрипте выше вы можете видеть, что первая ячейка таблицы работает правильно. Абсолютно позиционированный div находится в правильном месте. Второй скрыл верхний слот, и теперь абсолютное позиционирование больше не в верхнем левом углу. Если вынуть оба слота, это действительно испортит абсолютное позиционирование. Мне нужно позиционировать его абсолютно, потому что некоторые элементы будут смещаться в зависимости от элемента.