Prevent fixed sidebar menu to scroll over footer

Question

Hi is there a simple way to prevent a fixed sidebar som scrolling over a footer or a specific element? I've tried changing it from fixed to absolute depending on different viewport height but my application is nested in a lot of position relative elements so I haven't managed to get it to work yet.

Here is a code example:https://codesandbox.io/s/fixed-sidebar-7gvpf?file=/src/index.js

Ask if I need to clarify anything.

Thanks beforehand, Erik

Answer 1

Because the element is fixed and therefore outside the normal page flow you can z-index to specify if an element is above or below another.

In your case you can use it like this with z-index: -1; so it wil be positioned behind the element.

const SideBar = styled("div")`
  background-color: green;
  height: calc(100vh);
  width: 50px;
  position: fixed;
  z-index: -1;
`;

If this causes the sidebar to disappear behind everything you also can set the z-index on the footer with position: relative; to get it to work. like the following CSS:

const Footer = styled("div")`
  background-color: blue;
  height: 200px;
  position: relative;
  z-index: 1;
`;

Here is an MDN article on z-indexes if you want to know more https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index