Grow your CSS skills. Land your dream job.

Fixed width sidebar overlapping content – z-index not working!

  • # April 20, 2013 at 4:56 am

    Hi!
    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.
    or
    – 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.

    Codepen: http://codepen.io/anon/pen/dojbr

    # April 20, 2013 at 5:43 am

    Give `.main-wrap` `position: relative;` and `z-index: 2;`

    # April 20, 2013 at 8:07 am

    Thanks Merri, that solved it!
    Ill go and read some more about positioning… ;)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".