1

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

我有一个页面

<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) 覆盖。有什么办法可以解决我的问题吗？非常感谢！

4

4 回答 4

3

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

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

于 2013-10-03T00:12:54.470 回答
1

我会尝试：

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

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

于 2013-10-03T00:17:49.383 回答
0

嗨，也许这应该可以解决问题

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

和

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

编辑 ：

或者像这样的锚

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>
于 2013-10-03T00:25:32.737 回答
0

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

假设这是您的 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 修复程序！

于 2013-10-03T00:53:14.290 回答