Question

页面上有两个主要元素：'标题图像'和'导航栏'。图像使用边距重叠导航栏部分。

默认情况下，由于我不知道的一些技巧，它可以正常工作。图像覆盖了导航栏，但导航栏中的链接仍然可以在图像透明的区域中

然而，一旦导航栏固定（位置：滚动后固定，通过附加插件）这个技巧不再起作用 - 导航栏重叠图像。我的html如下：

<div class="container brand-img-container">
   <img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />      
</div>   

<div id="nav-wrapper" class="container">
<div class="row">
    <div id="nav" class="navbar navbar-static span4">
        <div class="navbar-inner">
                <ul class="nav pull-left">

                    <li><a href="anypage">Button</a></li>
                </ul>
        </div>
    </div>
</div>
</div>

<div class="container">    
   <h2> R <h2>    
</div>

CSS如下

#nav.affix {
 position: fixed; 
 top: 0; 
}

.brand-img-container {
  position: relative;
  margin-bottom: -80px;    
 }

你可以在这里找到它（base64） http://jsfiddle.net/5qYK8/9/

当我尝试使用z-index时，即使在默认情况下，图像完全也会与导航栏重叠，并且链接根本不起作用。你可以在这里找到它 http://jsfiddle.net/5qYK8/8/

是否可以将图像（红叉的一部分）与固定和非固定情况下的导航栏重叠与工作按钮？有人至少可以解释为什么Button在第一种情况下工作时图像会重叠吗？

Answer 1

因为您在导航的链接上有一个图像在一个点滚动，所以它将覆盖链接，因此您将不得不使用相同的jquery脚本在固定的<div>中创建另一个链接。该链接将是透明的，但可以使用您放置的任何链接点击该地点

您需要创建另一个<div>容器，然后在<a>周围添加<div>个链接，如下所示：

<div id="toplayer">
    <a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>

您还必须复制下面的选择器ID，并将其重命名为此示例。

#nav1.affix {
    position: fixed; 
    top: 0; 
    z-index: 0;
}

您的CSS需要的z-index高于包含图像的div。在我的例子中，我将背景设为蓝色，这样你就可以在测试时看到它移动。

#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}

这是 fiddle ，背景为蓝色，因此您可以看到它正常工作。这是一个没有蓝色的 fiddle ，所以你可以看到它应该是什么样的。

使标题图像与工作按钮部分重叠固定导航栏

1 个答案: