web-dev-qa-db-fra.com

Div avec défilement et contenu avec positions absolues

J'ai un "div" avec style: overflow-y: scroll; overflow-x: auto; J'essaie d'ajouter dynamiquement une image à l'intérieur de cette "div" avec une position absolue ou relative. Tout semble correct jusqu'à ce que l'utilisateur essaie de faire défiler le contenu "div": l'image reste en position fixe par rapport à la fenêtre du navigateur. Ce problème semble être uniquement dans IE (7), dans Firefox, tout va bien. Y a-t-il des solutions pour cela?

EDIT (en réponse aux questions posées ci-dessous): Je positionne l'élément car j'ai besoin qu'il s'affiche devant un autre élément.

javascripthtmlcssinternet-explorer
32
Eduard

Je ne sais pas si c'est un bug ou une "fonctionnalité" dans IE, mais j'ai rencontré la même chose auparavant. Heureusement, il existe une solution facile. Ajoutez simplement "position:relative" à la <div> qui a un contenu défilable.

95
Prestaul

Enveloppez tout dans un div contenant qui est positionné relativement sur la page:

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
    <br />
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
    <br />
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
        <br />[scrolling content]<br />
    </div>
    <br />
</div>
10
inkdeep

Y a-t-il une raison particulière pour laquelle vous devez définir une position pour l'image? Cela fonctionne bien dans IE7 sans définir de position.

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
2
Jared

Essayez float:left ou float:right avec margin

J'ai eu le même problème dans chrome avec position:absolute dans un overflow-y: auto;. Les divs devenaient fixes dans ces positions - pendant le défilement.

Et une solution simple utilise float.

mon ancien code était-

position:absolute; right:10px;

et je l'ai remplacé par ce qui suit et cela a fonctionné-

float:right; margin-right:10px;
1
Avi C

Vous devez utiliser le positionnement relatif si vous souhaitez qu'il puisse défiler. L'astuce consiste à utiliser un positionnement négatif sur le deuxième élément.

Disons que vous avez deux éléments A et B, et que vous souhaitez positionner B devant A. Cela ressemblerait à quelque chose comme ceci:

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>

Selon le contenu, vous devrez peut-être ajouter des styles supplémentaires tels que "display: block;" etc. Une bonne ressource pour ceux-ci est w3schools.com

Pour un bon tutoriel sur le positionnement DIV avec CSS, allez sur:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

À votre santé

0
Will

Vous savez quoi, il pourrait être plus simple d'envelopper les éléments positionnés en absolu dans un élément conteneur relativement positionné, je pense que cela devrait pouvoir défiler ...

0
Will

Choses que j'ai apprises à la dure: Pour IE6/IE7, il peut être nécessaire que l'image soit le dernier élément DOM dans le DIV contenant pour qu'elle apparaisse sur le DIV défilant.

0
inkdeep