Question

我在div中创建了一个绝对定位的无序列表。当我在href项目中添加li时，它无效。

例如：<li><a href="index.html">Home</a></li>仍无法点击。

这是CSS（导航是包装div）：

#nav
{
    background:#666666;
    position:absolute;
    top: 270px;
    left:150px;
    height:40px;
}
#nav ul li 
{
    position:relative;
    top:-8px;
    left: -15px;
    display:inline;
    padding: 0 33px;
    font-size:14px;
    border-right: 2px solid #333333;    
    margin:auto;
    color: #efefef;
}

这是完整的代码。我还发现其他一些元素是重叠的，但不知道该怎么做。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Good Brothers Film Entertainment</title>
            <link rel="stylesheet" href="css/default.css" type="text/css"/>
        </head>
        <body>
            <div id="container">
              <div id="header">
                <img src="images/logo2.png" id="logo2"/>
                <img src="images/logo.png"/>         
              </div>

              <div id="nav">
               <ul>
                 <li><span>H</span>OME</li>
                 <li><span>S</span>ERVICES</li>
                 <li><span>R</span>EELS</li>
                 <li><span>G</span>ALLERY</li>
                 <li><span>A</span>BOUT US</li>
                 <li><span>C</span>ONTACTS</li>
                 <li><span>A</span>FFILIATES</li>
               </ul>
              </div>
             </div>
              <img src="images/inner-background.png" id="inner-background" />
            <p id="welcome">~<span>W</span>ELCOME~</p> 
            <img src="images/good-brother.png" id="good-brother"/>
            <img src="images/working-together.png" class="work-together" />
            <img src="images/and.png" class="work-together" />
            <img src="images/exceeding-limits.png" class="work-together" />
            <img src="images/men.png" class="men" />
            <img src="images/men-shadow.png" class="men" />
            <img src="images/footer.png" id="footer" />
            <div id="video">
              <!--  <iframe width="560" height="315" src="http://www.youtube.com/embed/V0LQnQSrC-g" frameborder="0" allowfullscreen></iframe> -->
            </div>
        </body>
    </html>

The CSS
body,html{margin:0;border:0;padding:0;}

#container
{
   width:1360px;
   height:1024px;
   background:url(../images/background.png);
}

#logo2
{
  position:absolute;    
}

#nav
{
    background:#666666;
    position:absolute;
    top: 270px;
    left:150px;
    height:40px;
}
#nav ul li 
{
    position:relative;
    top:-8px;
    left: -15px;
    display:inline;
    padding: 0 33px;
    font-size:14px;
    border-right: 2px solid #333333;    
    margin:auto;
    color: #efefef;
}
#nav li span
{
    font-size: 21px;
}
#nav li:last-child
{
    border:none;
}
#inner-background
{
    position:absolute;
    top: 0px;
}
#welcome
{
    color:#ffffff;
    top:300px;
    left:300px;
    font-weight:bold;
    font-size:24px;
    position:absolute;
}
#welcome span
{
    font-size: 28px;
}
#good-brother
{
  top:1px;
  position:absolute;    
}
.work-together
{
    top: -5px;
    position:absolute;
}
#video
{
 top: 400px;
 left:600px;
 height:315px;
 width:560px;
 background: #eeeeee;
 position: absolute;

}
.men,#footer
{
    top:1px;
     position: absolute;    
}

Answer 1

根据您的布局，您可以将z-index设置为足够高的值，从而允许锚标记克服重叠元素。

Answer 2

Still work with the complete code，但没有图片。

我怀疑您的问题是#footer图片
（我可以确认图像是否超过300像素！）

原因如下：

.men,#footer
{
    top:1px;
     position: absolute;    
}

由于此图片在之后定义为，因此将其置于顶部。它既可以是图像，也可以是另一个足以覆盖标题的图像。

这个css声明可以帮助查找图像是否是罪魁祸首：

img {border:3px solid red !important;}

如果您有firebug或其他类似的开发工具，请右键单击您的链接并执行检查元素：如果您有一个元素，则应该选择它。

注意：如果你没有萤火虫或类似的东西......尽快得到一个。

锚标签不在绝对定位的div内工作

2 个答案: