页眉不在页面顶部
页眉不在页面顶部
提问于 2022-08-23 10:31:54
我试图克隆一个网站的前端，以提高我的知识。问题是标题不是在这个网站的顶部。我是新手，但我必须控制它。我确实重新设置了CSS。这是我第一次来这里，我很感谢你的帮助。
body {
margin: 0;
padding: 0;
}
*{
padding: 0;
margin: 0;
}
.img {
width: 221px;
height: 56px;
} <div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<a href="index.html" class="navbar-brand mx-4 mb-3"></a>
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
<div class="dropdown-menu bg-transparent border-0">
<a href="#" class="dropdown-item">A</a>
<a href="#" class="dropdown-item">B</a>
<a href="#" class="dropdown-item">C</a>
</div>
</div>
<a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
</div>
<!--sidebar end-->
</div>
<header class="sticky-top">
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-23 11:42:46
我已经移动了一些代码，并设法让它接近某个地方，确保您在标签中插入了正确的导入，比如Bootstrap 5或4等等.
(第二次尝试)
header {
border-bottom: 3px solid blue;
background-color: #eaeaea;
}
.dropdown-item {
background-color: red!important;
}
.sidebar {
overflow: hidden;
background-color: #eaeaea;
position: sticky;
top: 0;
width: 200px;
border-right: 2px solid blue;
} <head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
</div>
<header class="flex flex-col sticky-top">
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<a href="index.html" class="navbar-brand mx-4 mb-3"></a>
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
<div class="dropdown-menu bg-transparent border-0">
<a href="#" class="dropdown-item">A</a>
<a href="#" class="dropdown-item">B</a>
<a href="#" class="dropdown-item">C</a>
</div>
</div>
<div class="sidebar">
<a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
</div>
</div>
<!--sidebar end-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>我会考虑你的选择，因为有几种方式这样做，这种方式是我喜欢，但不是每个人。
首先，我们将元素固定在原来的位置，然后应用top:0来确保元素位于页面顶部，最后传递‘宽度: 100%’，以确保导航完全填充宽度。
如果这个答案不够的话，我可以帮更多的忙。
Stack Overflow用户
发布于 2022-08-23 12:23:15
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
width: 100%;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73457128
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号