html - 在图像上放置文本似乎会使导航中的链接消失( float 相对冲突？)

Question

我是新手，所以这可能真的很尴尬……把头撞到 table 上很尴尬……但是现在…… 我有一个导航栏，然后在下面(不是后面)我有一个图像。导航工作正常。好吧。直到，我在相对定位的图像之上添加了绝对定位的文本，然后我的导航上的链接不再有效，除了在 IE 中哈哈....当我删除行位置时:相对于框 div 我的导航链接工作。 ...我认为它是 float 和相对之间的一些冲突......看起来非常基本...... 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

即使框在标记中的导航之后，使用 float 也会采用文档的自然流中的那个元素，并且元素可以堆叠在另一个之上。这里的问题是盒子元素实际上在导航的顶部，所以它不能被点击，因为你实际上点击的是盒子 div 而不是导航。

将您的类(class)更改为以下将解决您的问题。

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

有关 z-index 的更多信息可在此处找到:http://www.w3schools.com/cssref/pr_pos_z-index.asp