锚标记在绝对定位的 div 中不起作用答案

【问题标题】：Anchor tag not working inside absolutely positioned div锚标记在绝对定位的 div 中不起作用
【发布时间】：2016-02-20 03:07:39
【问题描述】：

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

例如：<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;    
}

【问题讨论】：

这个问题出现在所有浏览器上？
请提供您正在设置样式的 HTML 标记。
实际上它有效：jsfiddle.net/EcyHP。可能你有一些其他元素与你的菜单重叠。
更新后：Still seems to work，虽然我必须为你添加<a>。最好制作一个现场演示来展示您的问题。
您的更新版本也可以使用：jsfiddle.net/EcyHP/3。您能给我们提供您页面的链接吗？另外，您使用的是什么浏览器/环境？

标签： css css-position

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

原因如下：

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

由于此图像是在之后定义的，因此它被置于顶部。它要么是该图像，要么是另一个足以覆盖您的标题的图像。

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

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

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

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

【讨论】：

嘿，克拉兹，你明白了。它的页脚就是罪魁祸首。那么我该怎么做才能正常显示呢？
这是一个页脚...所以选择#footer {bottom:0px;} 而不是 top:0px... :) （但是，在使用绝对/固定定位时要小心！ )
那么从 PSD 定位切片图像的最佳方法是什么，还是保存它更好？我是最近接触 CSS 的 PHP 程序员。我认为透明度会使工作更容易。事实证明，许多图像与导航 div 重叠。如果你从头开始做这件事，你会怎么做？
说实话，既然你说你是开始的，你只需要学习更多的 CSS 以及它是如何工作的！没有“完美”的方式。好的做法通常是将您的物品从上到下放置并将小物品放在大物品中。几乎不可能用这么几句话来解释。我建议您从网上获取一些不错的网站模板并查看代码。最后，尽可能减少图片的大小和数量:)
谢谢你。我不知道页脚比原始徽标大..lol...我正在浏览net.tutsplus.com/articles/news/how-to-convert-a-psd-to-xhtml。希望它会有所帮助。