CODEWITHSUNDEEP
htmlcssz-index
sakura
sakura

Reputation: 34

How to keep my position:fixed navbar from appearing underneath other elements?

I have a problem at the css levels because I am testing the code via this site: https://codepen.io/steveeeie/pen/NVWMEM . It works very well but at the level of my navbar, it goes above and not below when I scroll.

I noticed it's because of position: absolute but i'm trying to change it but it makes my navbar not fix at all at the top when scrolling.

Thank you in advance for your help :)

Upvotes: 0

Views: 617

Answers (1)

Justin Taddei
Justin Taddei

Reputation: 2266

What you're referring to as a CSS level is actually called the z-index of an element.
You can read up on it here: z-index on MDN.

From MDN:

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

The gist of it is that because your navbar (presumably) comes before these cards in your markup it will be shown underneath the cards. To combat this, set the z-index on the navbar to a value that is higher than the cards. Like so:

.navbar {
  /* [your other styles for your navbar] */

  z-index: 1000;
}

Upvotes: 1

Related Questions