Html 在图像上添加文本似乎会使导航中的链接消失（浮动相对冲突？）

我是新手，所以这可能真的很尴尬…砰的一声撞在桌子上尴尬。。。但这是。。。。 我有一个导航条，然后在下面（不是后面）有一个图像。导航工作正常。我很好。直到，我在相对定位的图像上添加绝对定位的文本，然后导航上的链接不再工作，除非在IE哈哈中。。。。当我删除行位置：框中的相对div时，我的导航链接工作。。。。我认为这是浮动和相对之间的一些冲突…似乎真的很基本。。。。 Hellllpppp。。。。有没有办法做到这一点（以下是一些代码

         <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;} 

文本文本文本文本文本

css:
#全部内容{
宽度：910px；
左边距：自动；
右边距：自动；}
#导航{
浮动：左；
保证金：0；
填充：0；}
#李海军{
浮动：左；}
#李娜{
显示：块；
宽度：130px；
背景色：黑色；}
#导航李a：悬停{
背景色：红色；}
#盒子{
位置：相对；}
#框2{
位置：绝对位置；
顶部：300px；
左：0；
颜色：蓝色；
背景：黑色；
宽度：250px；}

即使框在使用浮动标记的导航之后，也会占用文档自然流中的该元素，并且元素可能会堆叠在另一个元素之上。这里的问题是，框元素实际上位于导航的顶部，所以它不能被单击，因为您实际单击的是框div而不是导航

将您的类更改为以下将解决您的问题

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

---

关于z-index的更多信息可以在这里找到：

即使框在标记中的nav之后，使用浮动将占据文档自然流中的该元素，并且元素可以堆叠在彼此的顶部。这里的问题是框元素实际上位于nav的顶部，所以它不能作为ac被单击实际单击方框div而不是导航

将您的类更改为以下将解决您的问题

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

---

有关z-index的更多信息可以在这里找到：

很有效。谢谢你的帮助！！我真的很感激。：）很有效。谢谢你的帮助！！我真的很感激。：）