Dev-Mo
Published in : 2022-02-10
Sticky header goes behind the Images
My aim here is to make a sticky header that sticks to its original place in the window despite scrolling. The thing is whenever I give it position sticky it moves behind the image! or maybe behind its containing div. I replaced position sticky with position fixed and nothing changed. Still is the same thing.
<!DOCTYPE html><html><head> <meta charset=UTF-8> <meta name=viewport content="width=device-width, initial-scale=1.0"> <title>Havana</title> <link rel="stylesheet" href="main.css"></head><body> <header> <img src=./youtube_logo.png alt="youtube's logo" width=5% height=5%> <nav=c lass="navbar"> <ul > <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Our Store</a></li> <li><a href="#">Know More</a></li> </ul> </nav> <a href="#"><button>SOCIAL</button></a> </header> <section > <img src=./2f606ad14bf9171e5f41b42a01b4441f.jpg> <div > </section> </div> <div > <img src=./2f606ad14bf9171e5f41b42a01b4441f.jpg> </div></body></html>* { box-sizing: border-box; margin: 0; padding: 0;}body { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; /* padding-top: 100px; */}.section1 { /* position: sticky; */ display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; text-align: center; color: blueviolet;}.section1 img { /* position: sticky; */ flex-shrink: 0; min-width: 100%; min-height: 100%; position: relative; text-align: center;}.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}li,a,button { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; color: #edf0f1;}header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background-color: #24252a;}.header_logo { cursor: pointer; margin-left: -70px;}.nav_links { list-style-type: none;}.nav_links li { display: inline-block; padding: 0px 20px;}.nav_links li a { transition: all 0.3s ease 0s;}.nav_links li a:hover { color: #0088a9;}button { padding: 9px 25px; background-color: rgba(0, 139, 169, 1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease 0s;}button:hover { background-colorComments
Join us
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Mohammed Bal'awi Date : 2022-02-11
Best answers
1
Best answers
1
Hello Dev-Mo,
You need to add this:
header {
z-index: 999;
}
Any number from 1 to 9999 will be fine
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Hope this solve your problem.