粘滞的标题覆盖锚文本

我有一个粘滞的标题漂浮在页面的其余部分。当我链接到页面锚点时，当然会滚动，以便锚点位于页面的顶部。但是，如果发生这种情况，标题会覆盖下方的文字。粘滞的标题覆盖锚文本

有没有办法解决这个问题？我不能简单地移动定位点，因为页面中有很多定位点，并且每个定位点都有不同数量的文字。我的第一个虽然是以某种方式滚动到锚点上方的某个高度。

谢谢，大卫

2012-05-18 hoytdj

没有JavaScript，我想。 –

不一定是最好的方法，但是如果你的布局/设计允许它，你可以给锚点一个填充顶部，等于头部的高度。 – Steve

正是我想说的，尽管它取决于你的标题有多高... –

的：目标伪元素可能是你在找什么。 With：target可以解决用＃标记指出的元素。了解更多关于它here

2012-05-18 22:00:56 albin

：目标选择器看起来可能是我想要的。但是，那么我怎么才能让窗口随着CSS而下移呢？我当然可以使用javascript，但我宁愿不使用。 – hoytdj

页面会像以前一样向下滚动，但现在使用：target选择器添加一些额外的填充以将元素向下推。这样它就不再被粘滞的标题所隐藏。 – albin

我碰到了同样的问题，最终作出这样的规则：

A.named:target { 
    display: inline-block; 
    height: 120px; 
    margin-top: -120px; 
}

我那么应用的类“评选的”给我想让浏览器继续滚动锚标记至。这会在浏览器顶部和包含锚点的元素底部之间增加120px的空间 - 标题大约为80px，另一个40px用于补偿我链接到的H2标题的高度...并且负边距取消了正边距，它不影响我的页面的外观。

希望这会有所帮助！

2014-06-25 16:47:38 Ben

回答