I'm trying to create a webpage that has a sticky header and text below it but the text appears under the header when I scroll. I saw a similar question elsewhere and the suggested solution was giving the header a higher z-index; well, i tried that and it didn't work out.
I hope anyone can help. Below are my codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale-=1.0">
<title>Landing page</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing Script&family=Work Sans:wght@200&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<img id="header-img" src="nail-polish-icon.png" alt="logo">
<p id="header-title">Dreams Nails</p>
<nav id="nav-bar">
<ul >
<li ><a href="#overview">Overview</a></li>
<li ><a href="#perfect-nails">Perfect nails</a></li>
<li ><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<section id="overview">
<h1>Looking to relax and pamper yourself? Your beauty journey starts here</h1>
<p>Flawless, stunning and healthy nails</p>
<form action="https://www.freecodecamp.com/email-submit">
<label for="email"><input type="email" id="email" placeholder="Enter your email here" required></label>
<input type="submit" id="submit" value="Get Started">
</form>
<ul>
<li>Affordable Price</li>
<li>Easy Payment</li>
<li>Best Service</li>
<li>Near City</li>
</ul>
</section>
<section>
<p>Labore sint duis do eiusmod elit irure esse aliqua nisi ad. Laboris ullamco esse commodo laborum in veniam exercitation ex aliqua culpa velit dolor. Excepteur magna culpa tempor eiusmod esse ea id ad labore non ipsum. Nisi adipisicing labore eu dolore irure.
</p>
<p>Aliquip ad consectetur sit anim ullamco duis duis nulla ex proident. Ex exercitation est cupidatat aliqua est elit mollit non. Do ullamco cupidatat velit anim commodo voluptate in dolor duis commodo consequat reprehenderit ex magna. Exercitation ullamco eu nisi Lorem amet.
</p>
<p>Ullamco aute minim proident quis proident esse. Ea magna reprehenderit officia elit id quis culpa. Consectetur Lorem reprehenderit ut aliquip amet anim amet et.
</p>
<p>Amet minim officia labore laboris quis voluptate qui cupidatat consequat anim officia cillum sunt. Non dolore mollit tempor laborum ea aute pariatur qui ullamco consequat nulla culpa culpa consectetur. Et cupidatat amet consequat ea elit cupidatat sit nulla pariatur commodo.
</p>
<p>Nisi laborum reprehenderit eu laboris consequat consectetur nostrud exercitation magna tempor occaecat qui esse sint. Mollit voluptate in voluptate quis est sunt quis. Aliquip consectetur cillum nostrud est duis labore dolore incididunt excepteur minim exercitation exercitation sint.
</p>
<p>Eu culpa nisi qui aliquip dolore est deserunt do commodo duis deserunt anim. Elit ullamco qui aliqua qui voluptate quis est. In anim minim ipsum ut aliquip veniam nostrud et occaecat in id minim pariatur ea. Duis laborum nulla quis qui aliquip. Voluptate fugiat exercitation sit consequat enim sunt mollit consectetur duis deserunt deserunt reprehenderit et laboris.
</p>
<p>Proident ea amet culpa nulla ut nulla. Irure fugiat nulla est ea laboris. Sint nulla excepteur irure cupidatat officia velit tempor exercitation culpa ex. Aliqua ullamco reprehenderit anim laborum.
</p>
<p>Aliqua ex aute cupidatat ut eiusmod ex incididunt aute occaecat. Nostrud est ea laboris Lorem cillum in tempor est. Veniam quis commodo ipsum irure ea adipisicing aute. Eiusmod enim id et deserunt enim ea ut do id. Quis exercitation nisi anim aute dolore qui sit fugiat id quis. Labore veniam do veniam do sit nisi est duis cupidatat.
</p>
<p>Eiusmod quis veniam pariatur non commodo ex est id in pariatur ad adipisicing aliqua est. Aliqua veniam deserunt voluptate eiusmod. Exercitation in eu tempor veniam qui amet consequat et deserunt adipisicing non ea sint. Consequat sint exercitation pariatur reprehenderit ex ipsum ex. Ad tempor elit enim ad ex fugiat occaecat cillum. Cillum exercitation deserunt aute magna amet cillum proident commodo do et elit amet in. Non nulla exercitation quis laboris.
</p>
</section>
</main>
</body>
</html>
html {
font-size: 10px;
}
body {
font-size: 1.8rem;
position: relative;
}
#header {
display: flex;
align-items: center;
position: sticky;
top: 0;
width: 100%;
height: 80px;
background: rgba(255, 182, 193, 0.3);
}
#header-title{
width: 20%;
font-family: 'Dancing Script', cursive;
font-size: 3rem;
}
#nav-bar {
width: 80%;
display: flex;
justify-content: flex-end;
}
.nav-links {
list-style: none;
width: 50%;
max-width: 50%;
}
@media screen and (min-width: 800px){
.nav-links {
list-style: none;
display: flex;
width: 40%;
max-width: 40%;
justify-content: space-between;
}
}
CodePudding user response：
This happens because your header has a transparent background. It's placed above the other content of your site, but since it's transparent you can still see through it!
In the snippet I just changed background: rgba(255, 182, 193, .3); to background: rgba(255, 182, 193); in #header and you can see that it is no longer transparent.
html {
font-size: 10px;
}
body {
font-size: 1.8rem;
position: relative;
}
#header {
display: flex;
align-items: center;
position: sticky;
top: 0;
width: 100%;
height: 80px;
background: rgba(255, 182, 193);
}
#header-title{
width: 20%;
font-family: 'Dancing Script', cursive;
font-size: 3rem;
}
#nav-bar {
width: 80%;
display: flex;
justify-content: flex-end;
}
.nav-links {
list-style: none;
width: 50%;
max-width: 50%;
}
@media screen and (min-width: 800px){
.nav-links {
list-style: none;
display: flex;
width: 40%;
max-width: 40%;
justify-content: space-between;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale-=1.0">
<title>Landing page</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing Script&family=Work Sans:wght@200&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<img id="header-img" src="nail-polish-icon.png" alt="logo">
<p id="header-title">Dreams Nails</p>
<nav id="nav-bar">
<ul >
<li ><a href="#overview">Overview</a></li>
<li ><a href="#perfect-nails">Perfect nails</a></li>
<li ><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<section id="overview">
<h1>Looking to relax and pamper yourself? Your beauty journey starts here</h1>
<p>Flawless, stunning and healthy nails</p>
<form action="https://www.freecodecamp.com/email-submit">
<label for="email"><input type="email" id="email" placeholder="Enter your email here" required></label>
<input type="submit" id="submit" value="Get Started">
</form>
<ul>
<li>Affordable Price</li>
<li>Easy Payment</li>
<li>Best Service</li>
<li>Near City</li>
</ul>
</section>
<section>
<p>Labore sint duis do eiusmod elit irure esse aliqua nisi ad. Laboris ullamco esse commodo laborum in veniam exercitation ex aliqua culpa velit dolor. Excepteur magna culpa tempor eiusmod esse ea id ad labore non ipsum. Nisi adipisicing labore eu dolore irure.
</p>
<p>Aliquip ad consectetur sit anim ullamco duis duis nulla ex proident. Ex exercitation est cupidatat aliqua est elit mollit non. Do ullamco cupidatat velit anim commodo voluptate in dolor duis commodo consequat reprehenderit ex magna. Exercitation ullamco eu nisi Lorem amet.
</p>
<p>Ullamco aute minim proident quis proident esse. Ea magna reprehenderit officia elit id quis culpa. Consectetur Lorem reprehenderit ut aliquip amet anim amet et.
</p>
<p>Amet minim officia labore laboris quis voluptate qui cupidatat consequat anim officia cillum sunt. Non dolore mollit tempor laborum ea aute pariatur qui ullamco consequat nulla culpa culpa consectetur. Et cupidatat amet consequat ea elit cupidatat sit nulla pariatur commodo.
</p>
<p>Nisi laborum reprehenderit eu laboris consequat consectetur nostrud exercitation magna tempor occaecat qui esse sint. Mollit voluptate in voluptate quis est sunt quis. Aliquip consectetur cillum nostrud est duis labore dolore incididunt excepteur minim exercitation exercitation sint.
</p>
<p>Eu culpa nisi qui aliquip dolore est deserunt do commodo duis deserunt anim. Elit ullamco qui aliqua qui voluptate quis est. In anim minim ipsum ut aliquip veniam nostrud et occaecat in id minim pariatur ea. Duis laborum nulla quis qui aliquip. Voluptate fugiat exercitation sit consequat enim sunt mollit consectetur duis deserunt deserunt reprehenderit et laboris.
</p>
<p>Proident ea amet culpa nulla ut nulla. Irure fugiat nulla est ea laboris. Sint nulla excepteur irure cupidatat officia velit tempor exercitation culpa ex. Aliqua ullamco reprehenderit anim laborum.
</p>
<p>Aliqua ex aute cupidatat ut eiusmod ex incididunt aute occaecat. Nostrud est ea laboris Lorem cillum in tempor est. Veniam quis commodo ipsum irure ea adipisicing aute. Eiusmod enim id et deserunt enim ea ut do id. Quis exercitation nisi anim aute dolore qui sit fugiat id quis. Labore veniam do veniam do sit nisi est duis cupidatat.
</p>
<p>Eiusmod quis veniam pariatur non commodo ex est id in pariatur ad adipisicing aliqua est. Aliqua veniam deserunt voluptate eiusmod. Exercitation in eu tempor veniam qui amet consequat et deserunt adipisicing non ea sint. Consequat sint exercitation pariatur reprehenderit ex ipsum ex. Ad tempor elit enim ad ex fugiat occaecat cillum. Cillum exercitation deserunt aute magna amet cillum proident commodo do et elit amet in. Non nulla exercitation quis laboris.
</p>
</section>
</main>
</body>
</html> CodePudding user response：
on your #header background, the opacity of the background colour is set to 0.3. you can fix this by replacing background: rgba(255, 182, 193, 0.3); with background: rgba(255, 182, 193);. hope this helps ^^
CodePudding user response：
I saw your code and I figure out you are using background color value in rgba. full form of RGBA is Red, Green, Blue, Alpha.
Alpha Defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque).
You are using 0.3 that's why your background is behave like this and generate transparency. there is two way to handle your issue.
Set Alpha Value 1.0 .
#header {background: rgba(255, 182, 193, 1.0);}Use rgb rather than rgba.
#header {background: rgb(255, 182, 193);}