我为我父亲公司建立了一个网站。我制作了一个顶部的菜单栏，但要做到这一点，我必须添加一个120px的边缘顶部。这没问题，所以我做到了。
但是，如果我点击该菜单栏中的链接，我说它必须转到的标签，请转到页面顶部。但你无法看到它，因为菜单栏在文本之前。例如，如果我点击链接＆＃34; Neuraal Netwerk＆＃34;，我想看到h2＆＃34; Ervaring是de beste leermeester＆＃34;而不是＆lt; p＆gt;的一部分标签....
我该如何解决这个问题？
这是我的JSFiddle：https://jsfiddle.net/7afvgbag/2/
这是我的HTML代码：
<html>
<head>
<title>NeurOp</title>
<link rel="stylesheet" type="text/css" href="../Stijlen/Index.css">
<link rel="stylesheet" type="text/css" href="../Stijlen/Algemeen.css">
</head>
<body>
<div class="navbar">
<h1>NeurOp - Specialist in neurale oplossingen</h1>
<ul>
<li><a href="#home">Home</a></li> |
<li><a href="#neuraalNetwerk">Neuraal Netwerk</a></li> |
<li>Toepassingen</li> |
<li><a href="#overOns">Over ons</a></li>
</ul>
</div>
<div class="content">
<div class="home">
<h2 id="home">Neurale netwerktechnologie bereikbaar voor ieder bedrijf!</h2>
<p>Dat is ons doel en dat bereiken we door neurale netwerk technologie toe te passen op bestaande sets data. Bedrijven kunnen zo direct profiteren van de voordelen die deze krachtige technologie biedt. En omdat veel bedrijven hun data verzamelen in Excel, bieden wij de mogelijkheid onze technologie in Excel te gebruiken.</p>
<div class="lijnDun"></div>
<h2>Wat doet een neuraal netwerk</h2>
<p>Een neuraal netwerk is een zelf lerend computermodel. Het leert aan de hand van praktijkvoorbeelden, waar reguliere computermodellen worden gemaakt met behulp van business rules. Wil je een auto leren om zelf te rijden aan de hand van business rules, dan zal een oneindige set rules het gevolg zijn. Je kunt ook een zelf lerende computer laten 'meerijden' met een goede chauffeur.</p>
</div>
<div class="lijnDun"></div>
<div class="neuraalNetwerk" id="neuraalNetwerk">
<h2>Ervaring is de beste leermeester</h2>
<p class="ervaringLeermeester"><img src="../Media/pcHersenen.png" class="pcHersenen"><p>
<p class="ervaringLeermeesterTekst">In het zenuwstelsel van een mens geven zenuwcellen via verbindingen signalen aan elkaar door. De sterkte van die signalen is gebaseerd op onze ervaring. Dus wanneer we bezig zijn met leren / oefenen, zijn we de verbindingen in ons brein aan het trainen. Door iets vaker te doen worden we er beter in. Iemand met heel veel ervaring, is een expert.<br><br>Een neuraal netwerk werkt precies zo. Het is een computermodel dat is samengesteld uit neuronen en verbindingen daartussen. Aan de hand van voorbeelden met een bekende uitkomst worden de verbindingen sterker of zwakker gemaakt net zolang tot het netwerk de juiste antwoorden geeft. Daarna geeft het netwerk ook de juiste antwoorden in een nieuwe situatie. Predictive Analytics, Artificial Intelligence, Machine Learning en Deep Learning zijn slechts andere benamingen voor deze vorm van technologie. </p>
<h4>"Een neuraal netwerk neemt het juiste besluit, iedere keer opnieuw."</h4>
</div>
<div class="lijnDik"></div>
<div class="toepassingen">
<h2>Toepassingen</h2>
<h3>Incasso: Dagvaarden om het proces of om te incasseren?</h3>
<p>Alle inspanningen ten spijt, zijn er altijd debiteuren die hun factuur niet (kunnen) betalen. En naar genoeg lopen juist de kosten van de niet succesvolle incasso dossiers het hoogst op. <br><br>
Hoe eerder in het incasso proces bekend is of de vordering betaald zal worden of niet (kan of wil de debiteur niet betalen), hoe efficiënter het proces hierop ingeregeld kan worden. <br><br>
Met name wanneer de kostbare keuze om al dan niet te dagvaarden gemaakt moet worden is de toegevoegde waarde van een goed advies van doorslaggevend belang. <br><br>
Afgesloten dossiers vormen de voorbeelden waarmee het neurale netwerk getraind wordt. Voor lopende dossiers zijn we vervolgens in staat om ruim 25% van de kosten besparen.</p>
<div class="lijnDun"></div>
<h3>Commercie: Jagen op kansloze missies, of focus op reële kansen?</h3>
<p>Waar in de markt moet ik zijn om zinvol te acquireren? Op welke aanbesteding kan ik beter niet inschrijven omdat we die niet gaan winnen? Aan welke prospect besteed ik op vrijdagmiddag mijn laatste tijd deze week? Het antwoord op dit soort vragen is de sleutel naar een efficiëntere verkoopafdeling. <br><br>
En dat is concreet mogelijk met neurale netwerktechnologie! Zo zijn we bij voorbeeld in staat om de openstaande offertes van een bedrijf te onderverdelen in drie groepen:
<ul class="commercie">
<li>Offertes waarvan 60% zal leiden tot een opdracht.</li>
<li>Offertes waarvan 20% zal leiden tot een opdracht.</li>
<li>Offertes waarvan 1% zal leiden tot een opdracht.</li>
</ul>
</p>
<div class="lijnDun"></div>
<h3>Logistiek: Blijft de klant thuis voor de bezorger, of niet?</h3>
<p>Hoe laat de pakketbezorger een pakketje aan zal bieden is lastig te voorspellen. Dit is niet alleen afhankelijk van de chauffeur, maar bij voorbeeld ook van de weersomstandigheden en het aantal pakketten dat die dag uitgereden moet worden. We hebben 'proof of concept' mogen leveren op het afgeven van een tijdvakindicatie voor de bezorging van een pakket. Met neurale netwerktechnologie zijn we in staat het aantal verkeerde voorspellingen met 2/3 terug te dringen.<br><br>
Wanneer de voorspelde bezorgtijd betrouwbaar blijkt, zal de consument er meer waarde aan hechten. En er voor thuis blijven, waardoor de klanttevredenheid omhoog gaat evenals de 'hitrate' in de bezorging.</p>
<div class="lijnDun"></div>
<h3>Huurinning: De huurder uitzetten of het samen oplossen?</h3>
<p>'Vroege signalering', de branche heeft het er al jaren over en neurale netwerktechnologie maakt het mogelijk. Iedere maand opnieuw worden woningcorporaties geconfronteerd met huurders die niet (op tijd) betalen. Een klein deel hiervan belandt uiteindelijk in een uitzettingsprocedure. Wanneer bij de eerste uitblijvende betaling al duidelijk is hoe groot de kans is dat de huurder behoort bij die kleine probleemgroep, kan de opvolging hierop inspelen. Dat verhoogt de kans om samen met de huurder andere oplossingen te vinden. De toegevoegde waarde is sociaal misschien nog wel groter dan financieel.</p>
</div>
<div class="lijnDik"></div>
<div class="overOns" id="overOns">
<h2>Over ons</h2>
<p class="pfTekst">Een succesvol neuraal netwerk realiseren is complex. Om van scratch af aan een neuraal netwerk te bouwen, is gedegen kennis van de neurale netwerk technologie en algoritmes noodzakelijk.
Analytisch vermogen en het goed begrijpen van de klantsituatie zijn essentieel om de juiste toepassingen binnen een organisatie te herkennen en de data bruikbaar in te zetten.<br><br>
Dat is ons specialisme. Daarbij wij zijn zo overtuigd van de effectiviteit van onze toepassingen, dat we werken volgens het 'no cure no pay' principe. <br><br>
<em>"Resultaten uit het verleden zijn de basis voor de toekomst."</em></p>
<p class="pasfotoP"><img src="../Media/pfk.jpg" class="pasfoto"></p>
<p class="pasfotoP"><img src="../Media/pfj.png" class="pasfoto pfJeroen"></p>
<p class="afbeeldingTekst"><em>Koen Meeusen en Jeroen Blokdijk</em></p>
</div>
</div>
<div class="footer">
<p class="links">Neur<em>Op</em> BV<br>
koen.meeusen@neurop.nl<br>
<a href="tel:+31 651 808 628">+31 651 808 628</a></p>
<p class="rechts">KvK nummer: 64592154<br>
BTW nummer: 855734425B01<br>
IBAN: NL80 INGB 0007 1271 10<br>
<a href="../Media/AlgemeneVoorwaarden.pdf" target="_blank">Algemene Voorwaarden</a></p>
</div>
<!-- Algemene voorwaarden in PDF bestand downloaden in footer -->
</body>
</html>
这是我的CSS代码：
/************/
/* MENUBALK */
/************/
.navbar {
background-color: #60C8FF;
width: 100%;
height: 120px;
border-bottom: 3px solid #36B9FF;
position: fixed;
top: -5px;
}
.navbar h1 {
padding: 5px;
border-bottom: none;
text-align: center;
}
.navbar li {
display: inline;
width: 100%;
}
.navbar ul {
text-align: center;
width: 100%;
position: fixed;
top: 50px;
}
/**********/
/* FOTO'S */
/**********/
.afbeeldingTekst {
margin-top: 0px;
}
/********************/
/* LIJN ONDER KOPJE */
/********************/
.lijnDik {
border-top: solid 4px #36B9FF;
}
.lijnDun {
border-top: solid 2px #36B9FF;
}
/***********/
/* CONTENT */
/***********/
.content {
width: 70%;
margin: auto;
}
.home {
margin-top: 120px;
}
.machineLearning {
border-bottom: 2px solid #36B9FF;
width: 100%;
}
.pcHersenen {
width: auto;
height: auto;
max-width: 90px;
margin-top: -16px;
}
.ervaringLeermeester {
float: left;
}
.commercie {
margin-top: -15px;
margin-left: -20px;
list-style-type: square;
}
.overOns {
width: 100%;
}
.pasfoto {
width: auto;
height: 150px;
border-radius: 30px;
}
.pasfotoP {
display: inline-block;
}
.pfJeroen {
margin-left: 30px;
}
/**********/
/* FOOTER */
/**********/
.footer {
background-color: #303030;
color: #FFF;
height: auto;
display: inline-block;
width: 100%
}
.footer p {
display: inline-block;
}
.footer .links a {
color: #FFF;
text-decoration: none;
pointer-events: none;
cursor: text;
}
.footer .rechts a {
color: #FFF;
}
.footer .rechts {
float: right;
margin-right: 10px;
}
.footer .links {
float: left;
margin-left: 10px;
}
答案 0 :(得分：0)
我尝试了很多东西来解决这个问题，但我认为你不能只用CSS来解决这个问题。将#id添加到锚标记的href会告诉浏览器将具有该ID的元素放在y位置：0。我尝试在::before上添加.content，{{ 1}}，...但每次它加起来第一个元素...你不能在你要链接的每个div上添加padding-top填充，因为它会看起来可笑了。
我建议您尝试使用JS解决此问题或阅读这些相关帖子。
HTML position:fixed page header and in-page anchors
offsetting an html anchor to adjust for fixed header
此外，请尝试不将您的标记的类或任何内容放入荷兰语...如果您需要在此处提问，请使用英语。