The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # April 20, 2013 at 4:56 am

    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.


    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed