web-dev-qa-db-fra.com

Masquer le contenu défilable derrière les div à position fixe transparente lors du défilement de la page

J'ai un div appelé en-tête qui est mis en place avec une position fixe. Le problème est que lorsque je fais défiler la page, le contenu de la page apparaît derrière l'en-tête (l'en-tête est transparent).

Je connais beaucoup de css, mais je n'arrive pas à comprendre cela. J'ai essayé de régler le débordement sur caché, mais je savais que cela ne fonctionnerait pas (et cela n'a pas fonctionné).

C'est très difficile à expliquer, alors j'ai fait de mon mieux.

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:

enter image description here

csspositionfixed
16
mtlca401

J'arrive juste en retard, mais au cas où quelqu'un le verrait plus tard, voici votre solution.

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 HTML:

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

Cela vous donnera un en-tête qui correspond parfaitement à votre site et flotte en haut. Le contenu principal défilera librement de l'en-tête et disparaîtra lorsqu'il passera à l'en-tête. Votre .bottom-wrapper padding-top devrait correspondre à la hauteur du contenu de votre en-tête.

À votre santé!

15
Martin

Vous recherchez probablement z-index. Il vous permet de spécifier l'ordre vertical des éléments sur la page. Ainsi, un élément avec z-index: 10 flotte au-dessus (de manière visuelle) d'un élément avec z-index: 5.

Donnez le contenu z-index: 5 et voyez si cela fonctionne.

7
Blender

J'avais un problème similaire et j'ai trouvé une solution à mon cas. Cela devrait s'appliquer si vous utilisez une image d'arrière-plan en plein écran ou 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'aspect d'une image de page entière avec un en-tête fixe transparent et lorsque le contenu du corps défile, il se cache derrière l'en-tête. Les images apparaissent sans soudure.

Vous pouvez faire la même chose avec un fond de couleur unie, mais cela aurait sans doute été plus simple.

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

5
Scott Sawyer

Est-ce que #header a une hauteur définie?

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

Bien sûr, cela ne fonctionnerait pas dans IE cependant ...

1
asymptote

Fixer la position du contenu div sous l'en-tête + débordement-y le contenu div.

0
takrishna

Je pense qu'il est tard pour répondre. Mais plus tard, quelqu'un va jeter un coup d'œil, cela sera utile.

Ajoutez simplement le fond à la classe d'en-tête

Voici le code ->

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

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

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}
<!DOCTYPE html>
<html>


<body>

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

0
Mohamed Mohaideen AH