0

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

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

然而，一旦导航栏被固定（位置：滚动后固定，通过词缀插件）这个技巧就不再起作用 - 导航栏与图像重叠。我的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 在图像重叠时在第一种情况下工作吗？

4

1 回答 1

1

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

您将需要创建另一个<div>容器，然后<a>在 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 需要有一个高于包含图像的 div 的 z-index。在我的示例中，我将背景设为蓝色，以便您在测试时可以看到它移动。

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

这是一个蓝色背景的小提琴，所以你可以看到它在工作。这是一个没有蓝色的小提琴，所以你可以看到它应该是什么样子。

于 2013-12-29T04:10:34.703 回答