I am creating a responsive blog-site where one sidebar is 12% of the body (see codepen, the light-gray one). The sidebar itself has a background that stretches across the full height of the page.
Each post has it’s meta content in the light-gray sidebar to the right, represented with a red block. This content is overlapped by the background-div.
A solution would be something that either:
- Makes the fixed div go behind the meta-content, while remaining fixed.
- re-orders the code, while still achieving the desired result, which is meta content for each post in a sidebar with a consistent background-color that flows to the full height of the page, even when the body is scrolled.