Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #44261
    Anonymous
    Inactive

    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

    #132488
    Merri
    Participant

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

    #132495
    Anonymous
    Inactive

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.