I’m trying to make a navigation bar at the bottom of my webpage using CSS, but cannot figure out how to make it stay at the bottom.
HTML:
<div id="navbar" style="position: ??????; left: 0; right: 0; bottom: 0; height: 50px; background-color: #333; padding: 0; font-weight: bold; color: #c5cad0;">
</div>
When I set position as ‘absolute’, the bar stayed in the middle of the page when I scrolled down.
When I set position as ‘fixed’, the bar showed up on the bottom of the screen before I scrolled down.
When I used ‘static, relative, or sticky’, the bar was below the content, but not full width and not all the way at the bottom.
I am trying to get the bar at the bottom of the page, below all of the content (like Stack Overflow does).
2
Answers
Looks like you need
z-index
andwidth
withposition
try this:
This should resolve your issue.