css - div:hover を常に前に置く

Question

ホバーされた div のコンテンツを常に表示し続けることに関する 1 つの質問。

私は td で作られた大きなグリッドを持っています。各 td にカーソルを合わせると、その td に関する追加データを含むインフォボックスを表示したいと考えています。現在のコード:

JS-フィドル

#Grid {
}
.Field {
    border:thin solid black;
    width:30px;
    height:30px;
    float:left;
    background-color:blue;
    position:relative;
    z-index:0;
}
.FieldOverview {
    display:none;
}
.Field:hover {
    background-color:red;
}
.Field:hover .FieldOverview {
    display:block;
    position:absolute;
    top:10px;
    left:10px;
    width:100px;
    height:100px;
    border:thin solid black;
    background-color:red;
    z-index:1;
}

私の問題は、ホバー情報ボックスが正しく表示されないことです。情報ボックスが常に他の td の前に表示されるように z-index を追加しようとしましたが、うまくいきません。これらの質問も見ましたが、必要なものが十分に得られませんでした。

こことここ

私が持っている2番目の問題は、マウスがインフォボックス自体に移動したときにポップアップインフォボックスを保持したいということです。現在、ポップアップするインフォボックスでマウスを移動すると、マウスが別の td に移動すると、現在のインフォボックスが再び display:none に設定され、新しい td のインフォボックスが表示されます。

あなたの誰かがこれを達成する方法を知っていることを願っています。