画像にテキストを置くと、navのリンクが消えるようです（float相対的な衝突？）

Question

私はこれで新しく、これは本当に恥ずかしいかもしれません...テーブルの恥ずかしそうな頭に...しかし、ここに行く.. .. 私はナビゲーションバーを持っていて、（背後にない）私はイメージを持っています。ナビは正常に動作します。 img良い。私は、相対位置付けされた画像の上に絶対的に配置されたテキストを追加してから、navのリンクはIE ha ha以外では機能しなくなりました。 ...私は浮動小数点と相対的な間のいくつかの衝突が本当に基本的なようだと思う.... helllllpppp ....これを行う方法はありますか？ :(ここにいくつかのコードです。

  <ul id="nav"> 
      <li><a href="a.html" title="a page">a</a></li> 
      <li><a href="b.html" title="b page">b</a></li> 
      <li><a href="c.html" title="c page">c</a></li> 
      <li><a href="d.html" title="d page">d</a></li> 
      <li><a href="e.html" title="e page">e</a></li> 
      <li><a href="f.html" title="f page">f</a></li> 
      <li><a href="g.html" title="g page">g</a></li> 
     </ul> 
     <div id="box"> 
      <img src="images/image.jpg" alt="image"> 
      <p id="box2"> 
       text text text text text 
      </p> 
     </div> 
     css: 

       #allcontent { 
      width: 910px; 
      margin-left: auto; 
      margin-right: auto;} 
       #nav { 
      float: left; 
      margin: 0; 
      padding: 0; } 
       #nav li { 
      float: left; } 
       #nav li a { 
      display:block; 
      width:130px; 
      background-color: black;} 
       #nav li a:hover{ 
      background-color: red;} 
       #box { 
       position: relative;} 
       #box2 { 
       position: absolute; 
       top: 300px; 
       left: 0; 
      color: blue; 
      background: black; 
      width: 250px;} 

Answer 1

ボックスは1の上に積み重ねてしまうことができ、文書と要素の自然な流れの要素を取るマークアップ使用してフロート内のnav後であってもここで問題となるのは、実際にはbox要素がnavの上にあるため、クリックしてクリックすることはできません。

クラスを次のように変更すると問題が解決します。

#box { 
     position: relative; 
     z-index: -1; 
} 

z-indexの詳細は、次のとおりです。ここに：http://www.w3schools.com/cssref/pr_pos_z-index.asp