Annuler l'overflow:scroll du parent d'un calque qui est en absolute et ne doit pas être caché par l'overflow

Version imprimable

Bonjour,

En repartant du "titre", voila la situation. Un schéma de la page :

http://www.developpez.net/forums/att...ure-popup.gif/

Le plus encadré en bas à droite est un lien qu'on clique pour afficher la popup (partie rouge et verte). La popup doit être visible complètement et sa position dépend de la position du plus, d'où le code suivant :

Juste la partie du plus :
Code:

1 2 3 4 5  <div style="position:relative">  <a href="#" ...>+</a> </div>
Le CSS qui nous intéresse :
Code:

1 2 3 4 5 6 7 8 Div 2{ overflow: scroll; } popup{ position: absolute; }
Sur le dessin, la partie verte du calque popup représente la partie du calque qui est cachée (à cause du overflow:scroll de Div 2) mais moi j'aimerais qu'on la voit. Donc j'aimerais que la popup tienne pas compte du overflow:scroll, mais que Div 2 en tienne compte lui...

Je peux faire que la popup soit visible entièrement mais alors je n'arrive pas à la positionner en fonction du lien +...

Est-ce que c'est possible ?

D'avance merci pour votre aide.

Edit : comme autre solution je viens de penser à séparer le calque Div 2 en deux et de mettre l'attribut overflow:scroll dans la partie supérieur tandis que la seconde partie contiendra le lien +. Mais j'aimerais que le + soit scrollable aussi...

Bonsoir,

A priori, le problème (ou plutôt comportement normal) vient de l'attribution de position (excepté la valeur initiale static) et overflow (excepté la valeur initiale visible) a un même conteneur.

Tu peux séparer les deux :
1. Un conteneur positionné en relatif ;
2. Un enfant directe doté d'overflow ;
3. L'élément en absolue se réfère donc à son conteneur en relatif qui n'a plus l'overflow :)

Ce qui donne, par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Positionnement absolue et overflow</title>
 
<style type="text/css"> 
.relative { 
        position:relative; 
        padding:10px; 
        background:#000;
        width:500px;
}
.overflow { 
        overflow:auto; 
        background:gray; 
        height:150px;
}
.absolute { 
        position:absolute; right:50px; top:0; 
        width:150px; height:200px;
        background:red;   
}
</style>
 
</head>
 
<body>
 
<div class="relative">
	<div class="overflow">
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla <br />
		bla bla bla
		<div class="absolute">Positionné en absolute</div>
	</div>
</div>
 
</body>
 
</html>

Tu peux faire des petits tests en rajoutant par exemple un position:relative sur .overflow et voir la différence.

Merci pour ta réponse.

Je n'attribue pas vraiment overflow et position à un même conteneur. Mais ce que je fais est peut-être pareil.

Pour clarifier le premier poste, je reformule avec l'exemple. J'aimerais modifier le code qui suit pour que le calque absolute (rouge) soit visible hors du cadre scrollable :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Positionnement absolue et overflow</title> <style type="text/css"> .relative { position:relative; padding:10px; background:#ff3; width: 50px; } .overflow { overflow:auto; background:gray; height:150px; } .absolute { position:absolute; left:30px; top:10px; width:150px; height:200px; background:red; } </style> </head> <body> <div> <div class="overflow"> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <div class="relative"> <a href="#">+</a> <div class="absolute">Positionné en absolute</div> </div> </div> </div> </body> </html>
A partir du moment où le premier parent positionné (dont l'attribut position n'a pas la valeur par défaut static (c'est nouveau pour moi)) du calque absolute est hors du calque overflow, je comprends que ça marche mais ça ne me permet pas de positionner le calque absolute en fonction du lien +.

Dans ton exemple que j'ai modifié (plus haut), on peut se demander si c'est logique, techniquement possible, etc. de vouloir que le calque rouge ne tienne pas compte du overflow d'un de ses parents. Et si on veut le faire, l'approche est peut-être mauvaise.

Désolé si je te fais répéter. Si c'est le cas, c'est nécessaire pour moi :aie:

Merci!

28/08/2009, 14h39
Macmillenium

Le bloc référent se trouve dans un conteneur doté d'overflow, celui-ci couvre tous ses enfants/descendants même positionnés en absolue, c'est un comportement tout à fait normal et tu ne peux malheureusement pas faire grand chose.
29/08/2009, 11h44
goomazio

D'accord merci.