Scrolling body *underneath* a transparent header div?

问题

I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn't work since the header is mostly transparent.

Here is the site: link

Any ideas? Thanks

Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.

回答1:

Use the same background image for your body and header, but with background-position:fixed. This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.

On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.

回答2:

Here is your code:

#thebody {
    display:inline-block;
    position:relative;
    width:984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    font-size:24px;
    text-align:center;
    height:100%;
    z-index:-1;
}

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
}

The way z-indexs work is, anything to be included in the layering needs to also have an z-index set. So, in your code right now, only #thebody is set. Add this to #theheader:

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
    z-index: 10;  /* addition */
}

This places #theheader over the #thebody. Good luck, and let me know if you have questions.

来源：https://stackoverflow.com/questions/5492375/scrolling-body-underneath-a-transparent-header-div

标签

css

header

scroll

transparency

z-index