div au dessus d'un autre div, mais doit défiler en dessous de l'autre

il y a un div (à savoir div_fixed) qui est en position fixe. Un autre div à savoir other_content est sous la div_fixed. Le other_content div a une padding-top de la propriété, de sorte que, lorsque la page défile uniquement le other_content est déroulée sous le fixe div.

Le violon est ici

HTML :

<div class="div_fixed">FIXED</div>
<div class="other_content">
    content goes here<br/>
    content goes here<br/>
    content goes here<br/>
</div>

CSS:

     div { color: #fff }
        .div_fixed { position: fixed;  
    width: 100%; 
    height: 100px; 


    }

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto;

}

Mais je veux que la non-correction d'un div, de rester sur le fixe div et souhaitez la non-correction d'un div à disparaître, juste au-dessous de son bord supérieur c'est à dire la position de la non-correction d'un div à l'arête supérieure restera fixe, mais c'est le contenu va commencer à disparaître sur la page de défilement juste la façon dont il est arrivé quand il a été de rester sous le fixe div.

Donc j'ai dû un peu modifier dans le code html ( juste 2 pauses) avant de la non-correction d'un div :

    <div class="div_fixed">FIXED</div>
<br><br/>
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>

Le plus dans le css est:

  .fixed_div{

    z-index:-1;
    }

    .other_content{


    width:60%;
    z-index:99099900;


    }

Mais le bord supérieur de la non-correction d'un div ne pas rester dans la position que je veux.

Comment y parvenir ?

MODIFIER :

suppose que j'ai ajouter une image de fond pour les non-fixe div. Est-il possible qu'une partie de l'image d'arrière-plan fixe de div sur laquelle les autres div défiler aura un z-index plus élevé que celui des non-fixe div ? Le problème sera résolu de cette façon ?

EDIT2

Laisser utiliser supposons que fixed_div est l'en-tête, other_content est le contenu corps d'une page web. Laissez-nous ajouter un pied de page div avec l'id footer. Pas de défilement doit être présent dans other_content. other_content défiler lorsque la page défile.

InformationsquelleAutor Istiaque Ahmed | 2013-01-03

5

Je pense que c'est ce que vous cherchez. Vous aurez envie de position fixe div dans un fixed de la mode, mais la deuxième div n'a pas besoin de positionnement spécial. Juste lui donner un margin-top:100px où 100px est à la hauteur de la div.

L'astuce est d'utiliser z-index et à ajouter position:relative; le contenu de la div

De Travail De Démonstration: http://jsfiddle.net/KyP8L/3/
```
.div_fixed{
    height:100px;
    width:100%;    
    position:fixed;
    top:0;
    left:0;
    background:#ff0;
    z-index:500;
}
.other_content {
    width:60%;    
    background:#0ff;
    margin-top:100px;
    z-index:600;
    position:relative;
}
```
- ce changement n'a-il faire ? largeur de la other_content div doit être de 60%. Dans ce cas, la non-correction d'un div ne semble pas rester sur le fixe ?
- Il ne semble pas pour moi: jsfiddle.net/KyP8L/2
- other_content devrait rester au-dessus de fixed_div. jsfiddle ne montre pas que.
- Quand vous dites ci-dessus, vous voulez dire plus proche de l'utilisateur sur l'axe z? Ici, vous allez: jsfiddle.net/KyP8L/3 - l'astuce consiste à utiliser z-index et à ajouter position:relative; le contenu de la div.
- maintenant, c'est "au-dessus". Mais le other_content devraient être rester sur le fixed_div et le bord supérieur doit être un peu vers le bas pour que de la fixed_div .
- Vous aurez besoin d'expliquer ce que vous voulez un peu mieux, ou me montrer un exemple ou d'illustration.
- laissez-nous continuer cette discussion dans le chat
- est-ce la solution finale : jsfiddle.net/BCRPa/8 comme vous l'avez dit dans le chat ?
- le jsfiddle solution si elle est prise dans le navigateur pc comme un fait normal de la page web, il ne fonctionne pas..
- Veuillez voir mon edit, et edit2
InformationsquelleAutor Dutchie432
0

Une option serait d'envelopper le div du contenu dans un autre récipient avec une position fixe.

Par exemple:

HTML:
```
<div class="div_fixed">FIXED</div>
<div class="fixed_container">
    <div class="other_content">
        content goes here<br/>
        content goes here<br/>
        content goes here<br/>
    </div>
</div>
```
CSS:
```
.fixed_container {
    position: fixed;
    overflow: auto;
    top:30px;
    width: 100%;
    height: 5000px;
    z-index:10; }

.other_content { position: absolute; }
```
Démo: http://jsfiddle.net/xmKMs/
- que penser de la disparition de l'arête supérieure de la other_content dans la manière prévue ?
- Voici un exemple: jsfiddle.net/49AjB Est-ce que vous attendez?
- pourquoi padding-top:100px pour la other_content ?
- C'est juste ce que vous aviez dans votre exemple original. Qui peut être retiré si nécessaire.
- la suppression n'aide pas
- essayez de réduire la hauteur et l'augmentation de la quantité de contenu: jsfiddle.net/xmKMs
- pouvez-vous modifier dans le violon s'il vous plaît ?
- la barre de défilement pour le défilement de la div n'est pas voulu. Lorsque la page web est un défilement le défilement div doit également faire défiler... à la Recherche de la solution
- Veuillez voir mon edit, et edit2
InformationsquelleAutor DBPaul

Vous devez vous connecter pour publier un commentaire.