Question

我是新来的，所以这可能真的很尴尬......桌子上的尴尬令人尴尬......但是这里...... 我有一个导航栏，然后在（不在后面）我有一个图像。导航工作正常。好吧。直到，我在相对定位的图像上添加绝对定位的文本然后我的导航上的链接不再工作，除了在IE中哈哈....当我删除行位置：相对在框div我的导航链接工作。 ......我认为浮动和亲戚之间的冲突......似乎真的很基本...... 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

即使盒子在使用浮点数的标记中的导航之后，也会采用文档自然流动的元素，并且元素可以叠加在一起。这里的问题是box元素实际上位于导航的顶部，所以当你实际点击框而不是导航时，它不能被点击。

将您的班级更改为以下内容将解决您的问题。

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

有关z-index的更多信息，请访问：http://www.w3schools.com/cssref/pr_pos_z-index.asp

将文字放在图像上似乎会使导航中的链接消失（浮动相对冲突？）

1 个答案: