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

Home Forums CSS Two Fixed Divs Overlap

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #39792

    Hello Community!!

    If anyone could solve this I’d really appreciate it!!!

    Added a Fiddle for now:

    I have two fixed divs, one dark grey(#arc-admin) and one light grey. I would like to have one on top of the other (with dark grey div on top) and have them fixed as the user scrolls down the page.

    Currently I have this:

    The dark grey overlaps the light gray div (both fixed). Is there any way I can make the dark grey div clear the light grey div?

    Thanks so much, this problem is driving me crazy!!


    Note: the divs in question appear at the top of the page.


    I don’t see a light grey element? I’m also not entirely sure exactly what you are after.


    Sorry about that, hopefully this will clarify.

    I currently have this:

    and I would like to get this:

    The dark gray bar (in front aka 1) covers the lighter gray bar (2). I need #1 to push #2 down. Both bars will stay fixed, at the top as the user scrolls down the page.


    Right, so that’s a little tricky due to the use of position: fixed; (it removes elements from the flow of the document, so they technically can’t “push each other down”). With that being said, we can make use of CSS selectors to get the behavior you want. The following code will push #arc-header-top down, but only if #arc-admin is present:

    #arc-admin + #arc-header > #arc-header-top {
    top: 31px;

    The other thing to keep in mind is that now you are covering up part of the header, so you might want to use this also:

    #arc-admin + #arc-header {
    padding-top: 31px;
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.