Problema com posição de layer

Pessoal, eu tenho um problema com o posicionamento de layers, espero que possam me ajudar.

Eu tenho o seguinte codigo CSS

#layer_produtos { position:absolute; left:322px; top:111px; width:138px; height:211px; z-index:1; visibility: hidden; }

E o layer é inserido no documento, conforme exemplo abaixo

<td><a href="#"><img src=bt_institucional.gif" id="institucional" onMouseOver="MM_swapImage('institucional','','site/pt-br/images/bt_institucional_over.gif',1);MM_showHideLayers('layer_produtos','','show')" onMouseOut="MM_swapImgRestore();MM_showHideLayers('layer_produtos','','hide')"></a> <div id="layer_produtos" onmouseover="MM_showHideLayers('layer_produtos','','show')" onmouseout="MM_showHideLayers('layer_produtos','','hide')">AQUI VAI O CONTEUDO DO LAYER</div></td>

Como eu coloquei o layer como position absolute, ele fica na posição exata, mas em resoluções diferentes ele vai mudar de lugar. Se eu mudar a position para RELATIVE, ele vai alterar a página, ele vai deixar vários elementos da página fora de lugar.

Eu gostaria que este layer produtos ficasse sempre embaixo dessa figura do botão institucional. Como eu posso fazer isso? Tenho que trocar a posição dele, ou estou esquecendo algum comando?