<分区>
anchor div 上方的 HTML/CSS anchor
我在页面上使用多个 anchor ，使用负边距方法来说明我的固定标题 (50px)。当每个部分都有指定的高度时，锚定效果很好。当我将它们更改为基于内容动态工作时，它们会锚定在它们应该在其上方约 5px 的位置，留下一小部分空间导致我的侧导航元素符号出现问题(颜色会根据您所在的 anchor 而变化)。目前，jQuery 正在生成用于锚定的代码，但我已经将 href 硬编码到链接而没有任何更改。有什么想法吗？ 这是 HTML 的一个片段:
<div id="main-anchor" class="anchor"></div>
<section class="main page-section">
<div class="section-heading">
anchor 类:
.anchor {
content: "";
display: block;
height: 50px;
margin-top: -50px;
padding: 0;
position: relative;
top: 0;
}
*编辑:解决方案 - 我在 jQuery 中有两个 div 高度实例，后者是 51 而不是 50 像素，这在我的 anchor 上方形成了间隙。
最佳答案
没有javascript的解决方案
演示:http://jsbin.com/warixef/1/edit?html,css,output
body {
margin: 0;
margin-top: 50px;
color: white;
font-family: sans-serif;
text-align: right;
max-width: 400px;
}
a {color: white;}
.fixed-header {
background: slateblue;
padding: 1em;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.page-section {
background: lightblue;
padding: 1em;
}
.section-heading {
font-size: 110%;
display: block;
margin: 1em 0;
text-decoration: none;
}
.section-heading:hover {
text-decoration: underline;
}
.anchor {
position: relative;
top: -50px;
}
.section-content h1 {
text-align: left;
}
footer {
text-align: left;
background: slateblue;
padding: 1em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="fixed-header">Fixed Header</div>
<div id="main-anchor" class="anchor"></div>
<section class="main page-section">
<a href="#title1" class="section-heading">#Anchor1</a>
<a href="#title2" class="section-heading">#Anchor2</a>
<a href="#title3" class="section-heading">#Anchor3</a>
<div class="section-content">
<div id="title1" class="anchor"></div>
<h1>Title 1</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
<div id="title2" class="anchor"></div>
<h1>Title 2</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
<div id="title3" class="anchor"></div>
<h1>Title 3</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
</div>
</section>
<footer><a href="http://stackoverflow.com/questions/39780187/html-css-anchoring-above-anchor-div">SO Answer</a> </footer>
</body>
</html>关于 anchor div 上方的 HTML/CSS anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39780187/