Controlling an element that covers another [closed]

开发者_高级运维 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 9 years ago.

I have a fixed header. As I scroll, certain elements cover the header. How do I control this?

---

There are two solutions I can think of quickly off the top of my head. You can either give the #headercontainer element a z-index CSS property...

#headercontainer {
    /* ... other CSS ... */
    z-index: 1000;
}

... or you can do it the way I think it should be done...

#headercontainer {
    /* ... other CSS ... */
    position: fixed;
    top: 0px;
}

#contentcontainer {
    /* ... other CSS ... */
    margin-top: 125px; /* this should be at least the height of the header */
}

In the second solution, you don't have to worry about which element is hovering over which other element. The #contentcontainer element is properly pushed down under the #headercontainer element so that they have no overlap.

I hope this helps.
Hristo

---

You should set the z-index for the divs:

#headercontainer {
    z-index:1;
}
#contentcontainer {
    z-index:-1;
}

Adding the above lines should give your header priority over the content container.

---

Give the #headercontainer a higher z-index:

#headercontainer {
    z-index: 10;
}