une image qui n'apparaît pas...

... sous certaines conditions.

dans ma page j'ai un canvas dans une div :
<div id="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<!-- div id="primary_dot">&nbsp;</div -->
<div id="controls">
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>Hue</label> <input type="text" id="hueVal" /></div>
<div><label>HSL</label> <input type="text" id="hslVal" /></div>
<div><label>Delta</label> <input type='range' id="delta"
min='0' max='90' /></div>
<div><label> </label> <input type='text' id="deltaVal" /></div>
</div>
<img id="primary_dot" src="css/img/dot2.png">
</div>

là l'image 'primary_dot' n'apparaît pas, elle est pourtant présente au
bon endroit d'après "l'inspecteur d'élément"...


par contre, si je la place en dehors de la div (id="colorpicker")
contenant le canvas, elle apparaît :
<div id="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<!-- div id="primary_dot">&nbsp;</div -->
<div id="controls">
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>Hue</label> <input type="text" id="hueVal" /></div>
<div><label>HSL</label> <input type="text" id="hslVal" /></div>
<div><label>Delta</label> <input type='range' id="delta"
min='0' max='90' /></div>
<div><label> </label> <input type='text' id="deltaVal" /></div>
</div>
</div>
<img id="primary_dot" src="css/img/dot2.png">


mais bon, ça me gène cat je contrôle display='block'|'none' sur #colorpicker

les css relatifs à cette partie :
#colorpicker {
position: absolute;
top: 33px;
right:0px;
/*
right:50px;
*/
background-color: #222222;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #444444;
color: #FFFFFF;
font-size: 12px;
width: 460px;
z-index:9999;
}
#picker {
cursor: crosshair;
float: left;
margin: 10px;
border: 0;
}
#controls {
position: absolute;
top: 33px;
right:0;
float: right;
margin: 10px;
z-index:18999;
}
#controls > div {
border: 1px solid #2F2F2F;
margin-bottom: 5px;
overflow: hidden;
padding: 5px;
}
#controls label {
float: left;
}
#controls > div input {
background-color: #121212;
border: 1px solid #2F2F2F;
color: #DDDDDD;
float: right;
font-size: 10px;
height: 14px;
margin-left: 6px;
text-align: center;
text-transform: uppercase;
width: 75px;
}
#primary_dot {
position: absolute;
top: 196px;
left: 882px;
width:13px;
height:13px;
z-index:29999;
}

j'ai mis des "z-index" au cas où...