Positionner un DIV en haut d'un autre DIV

Bonjour, tout est dans le titre j'aimerais qu'un div soit systematiquement en haut de la bordure d'un div conteneur.

<div style="background:yellow;width:100%;height:200px;"></div>
<div style="position: relative;background:red;width:100%;height:3000px;">
	<div style="position: absolute; bottom: 0;background:green">en haut du div</div>
</div>

Avec ça évidement ça fonctionne, le petit div vert se met bien en haut du rouge et après le jaune mais j'aimerais que quand je scrolle le div vert reste en haut de la page (et là ce n'est pas le cas puisque la bordure rouge ne bouge pas).

Merci à tous !

Bonjour,

Je n'ai pas compris ton problème puisque dans ton exemple, le div vert est placé (logiquement) en bas du rouge et non en haut comme tu l'expliques

Au final, tu voudrais qu'il soit quelque part par défaut, puis qu'il se positionne ailleurs lors du scroll ?

Ahah ouai effectivement j'ai tapé le code vite fait faut mettre top à la place de bottom ...

En fait je voudrais toujours qu'il soit en haut de la zone visible du bloc rouge. C'est à dire tout en haut au chargement de la page et qu'il continue de rester visible à l'écran quand on scrolle vers le bas.

position : fixed;

dans ce cas.
Modifié par Gothor (29 Aug 2012 - 15:43)

Merci de vos réponses déjà.

Si je mets le DIV vert en fixed il va se positionner en haut de page et non pas dans son conteneur.

Skeno a écrit :
En fait je voudrais toujours qu'il soit en haut de la zone visible du bloc rouge.

Pour ce point précis, plusieurs solutions possibles, mais surtout pas position fixed

Skeno a écrit :
Enet qu'il continue de rester visible à l'écran quand on scrolle vers le bas.

Et pour ce point, seul position fixed fonctionne.

Tu l'auras compris, ce n'est pas faisable en CSS. Il faut te tourner vers JavaScript afin de pouvoir permuter de mode de positionnement lorsque le scroll a lieu.

Ouai je me doutais bien que c'était pas possible en CSS ...

T'as une piste à exploiter pour le javascript ?

Merci !

Ok, je viens de comprendre ce que tu voulais.
Tu peux peut-être regarder du côté du plug-in jQuery inView (article sur Creative Juiz).
Si la partie visible du conteneur est que le bas, tu mets ton bloc en "fixed", sinon, tu le mets en... peut-être absolute... A voir...