与顶部磁带链接到它时，如何保持元素可见
我在这里使用Bootstrap，我试图制作一个带有一些内容的导航栏，并且有一个网站的一部分链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>website with navbar</title>
</head>
<body>
<div class="container sticky-top" style="background-color: #f1f1f1; top: 0;">
<h1>website</h1>
<ul class="nav nav-tabs">
<il class="nav-item"><a href="#" class="nav-link">first lecture</a></il>
<il class="nav-item"><a href="#" class="nav-link"><b>second lecture</b></a></il>
<il class="nav-item"><a href="#" class="nav-link">third lecture</a></il>
<il class="nav-item"><a href="#" class="nav-link">fourth lecture</a></il>
</ul>
</div>
<div class="container" style="margin-top: 30px;">
<a href="https://shiyarjemo.com">موقع coder shiyar</a><br>
<a href="mailto:[email protected]" target="_blank">email</a><br>
<a href="tel:9647731150337">telephone</a>
<a href=""></a>
<h1 style="height: 700px; background-color: red;" id="h11">
<a href="#h1">first part</a>
</h1>
<h1 style="height: 700px;background-color: rgb(0, 255, 42);" id="h1">
<a href="#h11">second part</a>
</h1>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>i am using bootstrap here and i was trying to make a nav bar with some content and there is a link to a part of the site but the text i am linking to is being covered by the top nav bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>website with navbar</title>
</head>
<body>
<div class="container sticky-top" style="background-color: #f1f1f1; top: 0;">
<h1>website</h1>
<ul class="nav nav-tabs">
<il class="nav-item"><a href="#" class="nav-link">first lecture</a></il>
<il class="nav-item"><a href="#" class="nav-link"><b>second lecture</b></a></il>
<il class="nav-item"><a href="#" class="nav-link">third lecture</a></il>
<il class="nav-item"><a href="#" class="nav-link">fourth lecture</a></il>
</ul>
</div>
<div class="container" style="margin-top: 30px;">
<a href="https://shiyarjemo.com">موقع coder shiyar</a><br>
<a href="mailto:[email protected]" target="_blank">email</a><br>
<a href="tel:9647731150337">telephone</a>
<a href=""></a>
<h1 style="height: 700px; background-color: red;" id="h11">
<a href="#h1">first part</a>
</h1>
<h1 style="height: 700px;background-color: rgb(0, 255, 42);" id="h1">
<a href="#h11">second part</a>
</h1>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
添加
位置：相对;与第一个＆lt; div＆gt;一起使用的类。 ＆lt; h1＆gt;网站＆lt;/h1＆gt;），Add
position: relative;to the style of the first<div>with class of.container(The one on top of<h1>website</h1>),