我目前正试图使Facebook网站的克隆，但我遇到的问题与固定位置的标题。向下滚动后，mainBar会穿过标题栏，我找不到修复它的方法，甚至使用Z-index也无法修复这个问题。
请查看.header和mainBar并告诉我如何修复此问题，以便内容不再通过headerbar，并且headerbar保持在固定位置并像正常一样随页面滚动。
谢谢你
html,
body {
height: 100vh;
padding: 0;
margin: 0;
background-color: #f1f2f5;
}
/* this part is for the header */
.header {
display: flex;
position: fixed;
align-items: center;
justify-content: space-between;
flex-direction: row;
padding-bottom: 10px;
z-index: 1;
height: 40px;
padding: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
}
.leftHeader {
width: 25%;
display: flex;
justify-content: left;
align-items: left;
flex-direction: row;
}
.logo {
height: 50px;
width: 75px;
}
.searchBar {
background-color: lightgray;
position: relative;
padding: 15px;
border-radius: 50px;
display: flex;
gap: 20px;
margin-left: -10px;
}
.searchBtn {
width: 20px;
height: 20px;
cursor: pointer;
}
.searchLogo {
height: 50px;
width: 50px;
}
.inputText {
background-color: lightgray;
outline: none;
border: 0;
width: 175px;
height: 15px;
}
.centerHeader {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}
.centerHeader i {
font-size: 25px;
}
.rightHeader {
width: 25%;
display: flex;
justify-content: right;
align-items: right;
flex-direction: row;
gap: 20px;
}
.rightHeader i {
font-size: 25px;
}
.profilePic img {
height: 25px;
width: 25px;
border-radius: 50%;
object-fit: cover;
}
/* This part is for the main */
.mainBar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 50%;
margin: 50px auto 0;
background-color: red;
}
.stories_Reels_Box {
height: 300px;
width: 75%;
border-radius: 5px;
background-color: white;
}
.box_Two {
height: 300px;
width: 75%;
border-radius: 5px;
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/a35cda4da8.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="header">
<div class="leftHeader">
<img class="logo" src="images/Facebook-logo.png" />
<div class="searchBar">
<img class="searchBtn" src="images/search-icon.webp" />
<input type="text" class="inputText" placeholder="Search Facebook" />
</div>
</div>
<div class="centerHeader">
<div class="home">
<i class="fa-solid fa-house" style="color: #000000"></i>
</div>
<div class="watch">
<i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
</div>
<div class="marketplace">
<i class="fa-solid fa-shop" style="color: #000000"></i>
</div>
<div class="group">
<i class="fa-solid fa-user-group" style="color: #000000"></i>
</div>
</div>
<div class="rightHeader">
<div class="menu">
<i class="fa-solid fa-bars" style="color: #000000"></i>
</div>
<div class="message">
<i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
</div>
<div class="notification">
<i class="fa-solid fa-bell" style="color: #000000"></i>
</div>
<div class="profilePic">
<img
src="/images/ProgrammingIllustration.png"
alt="profile_picture"
/>
</div>
</div>
</div>
<div class="mainBar">
<div class="stories_Reels_Box"></div>
<div class="box_Two"></div>
</div>
<div class="leftSidebar"></div>
<div class="rightBar"></div>
</body>
</html>
1条答案
按热度按时间7kqas0il1#
标题没有背景颜色。添加一个背景色，使其后面的任何东西都不可见。