position: sticky not working

A sticky element needs an inset, room to move and the scroll container you intended. Check those before adding a larger z-index.

Start with an inset

.sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
}

For vertical sticking, top or bottom must be something other than auto. In a grid or flex row, stretching can make the item as tall as its parent. align-self: start can leave it room to move.

Inspect every ancestor

An ancestor with overflow: auto, scroll or hidden can become the sticky element's scroll container. If that ancestor does not actually scroll, the element may never stick as you scroll the page. Check computed styles, not only the rule you wrote. Setting overflow-x: hidden can also change the computed vertical overflow.

Remove the overflow rule temporarily in your browser's developer tools. If that fixes it, decide which box should scroll. Do not remove clipping blindly. overflow: clip does not create a scroll container, but it still clips content and is not a drop-in replacement for every use of hidden.

Check the available space

A sticky element stays inside its containing block. A short parent can stop it almost immediately. An element as tall as the scroll area can also be a poor fit for this layout. Try a shorter sidebar and a taller parent to isolate the cause. On small screens, a normal non-sticky layout may work better.

If it sticks but disappears behind another box, inspect stacking and background separately. z-index can help that case. It cannot create the missing scroll space. Test the page with keyboard focus and browser zoom so a sticky panel does not cover the content you need.

Want this fixed on your page? One agreed HTML or CSS fix costs $29. You keep the code.