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

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

css

Css 锚定标签不在绝对定位的div内工作,css,css-position,Css,Css Position,我在一个div中创建了一个无序列表，这个div是绝对定位的。当我在li项目中添加href时，它不起作用例如：仍然不可单击这是CSS，nav是包装div： #nav { background:#666666; position:absolute; top: 270px; left:150px; height:40px; } #nav ul li { position:relative; top:-8px; left: -15px

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

例如：仍然不可单击

这是CSS，nav是包装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;    
}

，但没有图像

我怀疑您的问题是页脚图像我可以确认这是如果图像超过300像素高

原因如下：

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

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

此css声明有助于发现图像是否是罪魁祸首：

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

若你们有firebug或其他类似的开发工具，右键点击你们的链接并检查元素：若你们有一个元素在上面，它应该被选中

注意：如果你没有firebug或类似的东西。。。尽快获取一张。

，但没有图像

我怀疑您的问题是页脚图像我可以确认这是如果图像超过300像素高

原因如下：

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

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

此css声明有助于发现图像是否是罪魁祸首：

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

若你们有firebug或其他类似的开发工具，右键点击你们的链接并检查元素：若你们有一个元素在上面，它应该被选中

注意：如果你没有firebug或类似的东西。。。尽快获取一个。

根据您的布局，您可以将z索引设置为足够高的值，以允许锚定标记克服重叠元素

此问题在所有浏览器上都会发生？请提供您正在设置样式的HTML标记。实际上它可以工作：。可能您还有一些与菜单重叠的元素。更新后：，尽管我必须为您添加。可能最好制作一个实时演示来显示您的问题。您的更新版本也可以运行：。你能给我们一个链接到你的页面吗？另外，您使用的浏览器/环境是什么？此问题在所有浏览器上都会发生？请提供您正在设置样式的HTML标记。实际上它可以工作：。可能您还有一些与菜单重叠的元素。更新后：，尽管我必须为您添加。可能最好制作一个实时演示来显示您的问题。您的更新版本也可以运行：。你能给我们一个链接到你的页面吗？还有，你用的是什么浏览器/环境？嘿，克拉兹，你用对了。这是罪魁祸首。那么我应该怎么做才能正确显示呢？这是一个页脚。。。所以选择页脚{bottom:0px；}而不是top:0px…：但是，使用绝对/固定定位时仍需小心！那么，从PSD定位切片图像的最佳方法是什么，还是保存切片图像更好？我是一个PHP程序员，最近开始接触CSS。我认为透明度会使工作更容易。事实证明，许多图像与导航div重叠。如果您是从头开始这样做的话，您将如何做到这一点？老实说，既然您声明您正在开始，您只需要了解更多CSS及其工作原理！没有完美的方法。良好的实践通常是从上到下定位您的物品，并将小物品放入大物品中。用这么少的话来解释那几乎是不可能的。我建议你从网上抓取一些不错的网站模板，看看代码。最后，尽可能减少图片的大小和数量：谢谢你。我不知道页脚比原来的logo大..哈哈..我要通过了.希望它能帮上忙.嘿，克拉兹，你把它弄好了。这是罪魁祸首。那么我应该怎么做才能正确显示呢？这是一个页脚。。。所以选择页脚{bottom:0px；}而不是top:0px…：但是，使用绝对/固定定位时仍需小心！那么，从PSD定位切片图像的最佳方法是什么，还是保存切片图像更好？我是一个PHP程序员，最近开始接触CSS。我认为透明度会使工作更容易。事实证明，许多图像与导航div重叠。如果您是从头开始这样做的话，您将如何做到这一点？老实说，既然您声明您正在开始，您只需要了解更多CSS及其工作原理！没有完美的方法。良好的实践通常是从上到下定位您的物品，并将小物品放入大物品中。用这么少的话来解释那几乎是不可能的。我建议你从网上抓取一些不错的网站模板，看看代码。最后，尽可能减少图片的大小和数量：谢谢你。我不知道页脚比原来的logo大..哈哈..我要通过了.希望它能通过帮助