Masquer le contenu défilant derrière les divs fixes à position fixe lors du défilement de la page?

J'ai un div appelé en-tête est défini avec une position fixe. Le problème est quand je scroll de la page, le contenu de la page s'affiche derrière l'en-tête (la tête est transparent).

Je sais beaucoup de choses sur le css, mais ne semble pas à celui-ci. J'ai essayé de réglage de dépassement de la cacher, mais je savais que ça ne marcherait pas (et il n'a pas).

C'est très difficile à expliquer, donc j'ai fait du mieux que je pouvais.

html:

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

css:

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

Voici une capture d'écran du problème:

Masquer le contenu défilant derrière les divs fixes à position fixe lors du défilement de la page?

source d'informationauteur mtlca401

  1. 15

    Juste venir à cette fin, mais dans le cas où quelqu'un d'autre s'exécute sur ça dans le futur, voici votre correction.

    Votre Code CSS:

    .wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

    Votre code HTML:

    <div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

    Ce qui vous donnera un en-tête proprement correspond à votre site, et flotte au sommet. Le contenu principal de défilement libre de l'en-tête, et disparaissent quand il passe à l'en-tête.
    Votre .bas-wrapper padding-top devrait être à la hauteur de votre en-tête wrapper.

    Cheers!

  2. 7

    Vous êtes probablement à la recherche pour z-index. Il vous permet de spécifier la verticale d'éléments sur la page, donc un élément avec z-index: 10 est flottant au-dessus (visuellement) un élément avec z-index: 5.

    Donner le contenu z-index: 5 et voir si cela fonctionne.

  3. 5

    J'ai eu un problème similaire, et a trouvé une solution pour mon cas. Il devrait s'appliquer si vous utilisez une image plein écran de fond, ou d'une couleur unie (y compris le blanc).

    HTML

    <div id="full-size-background"></div>
 <div id="header">
  <p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
  <p>Some text that should be scrollable</p>
</div>

    CSS

    #full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

    Cela me donne l'apparence d'une pleine page de l'image avec un fond transparent en-tête fixe et lorsque le contenu du corps de parchemins, elle se cache derrière la tête. Les images apparaissent en douceur.

    Vous pourriez faire la même chose avec un solide arrière-plan de couleur, même si, sans doute, il aurait été plus facile.

    2 notes: l'en-tête a une hauteur donnée, je ne l'ai testé que dans FF et Chrome.

  4. 1

    Ne #header ont une hauteur?

    #header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }

    Assez sûr que cela ne fonctionne pas sous IE...

  5. 0

    Fixer la position de la div du contenu en dessous de l'en-tête + overflow-y le contenu de la div.

  6. 0
    1. J'ai image de fond fixe
    2. L'en-tête arrière-plan est transparent
    3. Je ne veux pas que mon contenu pour remplacer mon transparente en-tête

    Je suis venu avec une solution de défilement de la div au lieu que le corps:

    <div>
    <div class="header"></div>
    <div class="content"></div>
</div>


.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }