How does the "position: sticky;" property work?

html css css-position
Harleyoc1 picture Harleyoc1 · Apr 30, 2017 · Viewed 318.9k times · Source

I want to make the Navigation Bar stick to the top once I scroll to it, but it's not working and I have no clue why. If you can please help, here is my HTML and CSS code:

Answer

MarsAndBack picture MarsAndBack · Dec 19, 2017

Check if an ancestor element has overflow set (e.g. overflow:hidden); try toggling it. You may have to go up the DOM tree higher than you expect =).

This may affect your position:sticky on a descendant element.

Related questions

How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

Read More
How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

I have a div positioned fixed on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if …

Read More
CSS z-index not working (position absolute)

I am trying to make the black div (relative) above the second yellow one (absolute). The black div's parent has a position absolute, too. #relative { position: relative; width: 40px; height: 100px; background: #000; z-index: 1; margin-top: 30px; } .absolute { position: absolute; top: 0; left: 0; …

Read More