div au-dessus d’un autre div, mais doit défiler sous le dernier

il y a un div (à savoir div_fixed ) qui est fixe. Un autre div savoir other_content trouve sous le div_fixed . Le div de other_content a une propriété padding-top sorte que lorsque la page est other_content seul le other_content défile sous le div fixé.

Le violon est là

HTML:

 FIXED
  content goes here
 content goes here
 content goes here

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 div non fixée rest sur la div fixe et que la div non fixée disparaisse juste sous son bord supérieur, c’est-à-dire que la position du bord supérieur de la div non fixée rest fixe mais que son contenu commence à disparaître au défilement de la page. juste la façon dont c’est arrivé quand il restait sous la div fixe.

Donc, j’ai eu une petite modification dans le code HTML (seulement 2 pauses) avant la div non fixée:

  FIXED
 

  content goes here
 content goes here
 content goes here

L’ajout en css est:

  .fixed_div{ z-index:-1; } .other_content{ width:60%; z-index:99099900; }

Mais le bord supérieur de la div non fixée ne rest pas à la position que je veux.

Comment y parvenir?

EDIT :

supposons que j’ajoute une image de fond pour la div non fixée. Est-il possible qu’une partie de l’image d’arrière-plan de la div fixée sur laquelle l’autre div fera défiler aura un z-index supérieur à celui de la div non fixée? Le problème sera-t-il résolu de cette manière?

EDIT2

Supposons que fixed_div soit l’en-tête, other_content le contenu d’une page Web. Ajoutons un div bas de page avec id. Aucun parchemin ne doit être présent dans other_content . other_content devrait défiler lorsque la page est défilée.

Je pense que c’est ce que vous recherchez. Vous voudrez positionner la div fixed manière fixed , mais la seconde div n’a pas besoin de positionnement spécial. Donnez-lui simplement une margin-top:100px où 100px est la hauteur de la div fixe.

L’astuce consiste à utiliser z-index et à append position:relative; au contenu div

Démo de travail: 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; }

Une option consisterait à envelopper le contenu div dans un autre conteneur avec une position fixe.

Par exemple:

HTML:

 FIXED
   content goes here
 content goes here
 content goes here

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/