Position:fixed; is making my navigation bar disappear

created a navigation bar through an unordered list in my header section. I then set the list to inline-block. Finally I set the list to position: fixed in the hopes of creating a nav bar that follows the user around; but the nav bar disappears behind a background image (which is set to position: relative in the main section). how can I fix this problem?

before I set the position to fixed:

the code I apply to the navbar:
.taskbar {
height: 50px;
width: 97%;
z-index: 1;
overflow: hidden;
top: 0;


Result: image swallows the navabar

fixed elements require a width, given they won’t inherit from a parent

please copy paste your code, code is preferred over images/screenshots

you can just copy paste the code? Although you might need to apply some format to make the html code show:


if you can’t succeed in this, don’t worry, i will fix it :wink:

copy and pasted the css i applied to the navbar. I tried to use the link, but it said I didn’t have access to that topic.

then just copy your full html & css code, i will fix the markup. Or upload the files if you prefer, there are always multiple ways to solve a problem

tried uploading file my html and css files, but it wouldn’t allow me to. do you want me to copy and paste my html and css to a reply?

you could use a could service like dropbox or google drive? You are programmer, figuring out how to do something is part of the job description. Copy and paste in a reply is also fine.

Sorry, i’m still training to become a front end web developer.

if we use the inspector:

we can see that your taskbar background simple has a height of zero, given taskbar is taken out of regular document flow due to position fixed.

on the right hand side (in the inspector), i hover over the element, then within the page you can see where this element is and its dimensions. Given the height is zero you only see a line and a small black pop-up

1 Like

thank you stetim94. This problem gave me so many headaches :joy: