如何解决我的锚链接问题答案

【问题标题】：How to fix my anchor link issue如何解决我的锚链接问题
【发布时间】：2013-10-03 00:09:37
【问题描述】：

我有一个关于锚标记的问题。

我有一个类似的页面

<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 链接时，我的“内容”div 都会被推到我的标题 div 的顶部。所以我的“内容”div 被我的标题 div (150px) 覆盖。有什么办法可以解决我的问题吗？非常感谢！

【问题讨论】：

这就是你所有的 CSS 吗？
您正在使用position:fixed，它会从文档流中删除元素。所以，其他内容会重叠。你有什么尝试解决它？你的尝试出了什么问题？

标签： html css

【解决方案1】：

将 z-index 参数设置为 -1。将其设置为高值会将您的 div 置于其他 div 之上，并将浮动在其他之上。-1 将其设置为小于其他的 z 排序。如果您不关心代码中 div 之间的特定 z 顺序，也可以将其完全删除。

更新：固定位置也会导致您的 div 被“锚定”在页面的某个位置，并且在不“推”其他位置的情况下展开。还请考虑更改 CSS 位置元素值 (http://www.w3schools.com/css/css_positioning.asp)。

【讨论】：

但我需要我的 div 在它上面。删除 z-index 将使“内容”覆盖我的标题 div +1
答案已更新。我认为位置和 z-index 都导致了这个问题。

【解决方案2】：

我会尝试：

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

强制所有内容始终位于标题下方。

【讨论】：

如果添加overflow-y 样式会怎样？

【解决方案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>

【讨论】：

【解决方案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 修复可能是票！

【讨论】：