Question

我对锚标记有疑问。

我有一个类似

的页面

<div id='header'>
    bunch of stuff….and iamges
</div>

<div>
   <a href='#test1>test1</a>
   <a href='#test2>test2</a>
   <a href='#test3>test3</a>
</div>

<div class='content'>
   <a name='test1'>test1 project</a>
   bunch of stuff

   <a name='test2'>test1 project</a>
   bunch of stuff

   <a name='test3'>test1 project</a>
   bunch of stuff
</div>

我的css

#header{
  position: fixed;
  right: 0;
  left: 0; 
  z-index: 1030;
  margin-bottom: 0
 height:150px;
}

然而，似乎每次我点击test1到test3链接，我的内容＆＃39; div得到了我的标题div的顶部。所以我的内容＆＃39; div由我的标题div（150px）覆盖。有没有解决我的问题？非常感谢！

Answer 1

将z-index参数设置为-1。拥有一个高价值的东西，他会把你的div放在其他的上面，并将浮动在其他的上面。-1将它设置为z顺序，而不是其他的。如果你不关心代码中特定的z-ordering betheen div，你也可以完全删除它。

更新：固定位置还会使您的div在页面的某个位置“锚定”，并且可以扩展而不会“暂停”其他页面。另请考虑更改CSS位置元素值（http://www.w3schools.com/css/css_positioning.asp）。

Answer 2

我会尝试：

.content{position:absolute;top:150px;overflow-y:auto;}

强制所有内容始终低于标题。

Answer 3

你好this should do the trick

<a name="AnchorName" class="anchor"></a>

和

.anchor {
   position: relative;
   top: -[number]px;
}

编辑：

或者像这样的锚

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>

Answer 4

这是一种非常奇怪的做法......

假设这是您的HTML，请将锚点（无内容！）放在感兴趣的元素之前：

<div id='header'>bunch of stuff and images</div>
<div class='nav'> 
    <a href='#test1'>test1</a>
    <a href='#test2'>test2</a>
    <a href='#test3'>test3</a>
</div>

<div class='content'>
<a name="test1"></a>
<div class='content-panel'>
   <a>test1 project</a>
   bunch of stuff
</div>

<a name="test2"></a>
<div class='content-panel'>
   <a>test2 project</a>
   bunch of stuff
</div>

<a name="test3"></a>
<div class='content-panel'>
   <a>test3 project</a>
   bunch of stuff
</div>

</div>

并应用此CSS：

body {
    margin: 0;
}
#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    height:150px;
    background-color: rgba(125,125,20,0.6)
}
.nav {
    margin-top: 150px;
    border: 0px solid blue;
    padding: 10px;
    width: auto;
    border-bottom: 1px solid blue;
}
.content {
    overflow: auto;
}
.content-panel {
    background-color: lightgray;
    margin: 0px 0;
    padding: 10px;
    height: 400px;
}
a:target {
    display: block;
    line-height: 0;
    margin-bottom: 150px;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/6gHE6/

这个技巧涉及使用:target选择器在锚点底部添加一个边距，相当于固定标题的高度。

这会在你的页面中产生一些额外的空白区域哦，好吧......就像我说的那样，有点奇怪的做法。

或者，JavaScript / jQuery修复可能是故障单！

如何解决我的锚链接问题

4 个答案: