problemas con la posicion de un div flotante

[intiweb]

hola. les cuento por donde va mi problema, no es nada dificil seguro solo que los post que encontre sobre el tema no los entendi del todo.
tengo una pagina creadas con tablas celdas imagenes de fondo etc. y le coloque una div flotante, o sea una capa por ensima porque necesitaba meter un contenido por ensima del otro. mi problema es que el div que utilizo fija una posicion respecto de la ventana del navegador y no de mi diseño por lo cual depende el monitor o cuan abierto esta la ventana del navegadore del cliente saber si va a quedar el contenido donde debe quedar o si lo va a plazar a cualquier otro lado. alguien sabe como ponerle la posicion del div respecto de mi diseño ?? o sea de la tabla que contiene todo el diseño ??
creo que tiene que ver con lo de posicion absolute o relative pero no logro entender bien como funciona :(.
saludos

[intiweb]

les dejo el codigo para que vean a ver si hay esta mas claro cual es el problema:

aca esta el codigo Css:

Código CSS:

#posicion {
    position:absolute;
    left:203px;
    top:326px;
    width:204px;
    height:247px;
    z-index:1;
}
 

aca esta el codigo Html:

Código HTML:

<div align="center">
  <table width="903" height="570" border="0">
    <tr>
      <td>
      <div align="center" id="pagina1">
        <table width="900" height="575" border="0" cellpadding="0" cellspacing="0" background="jpg/fondo_fotos1.jpg">
          <tr>
            <td width="106" height="28">&nbsp;</td>
            <td width="703"><div id="posicion">
  <form id="form1" name="form1" method="post" action="">
    <table width="201" height="231" background="jpg/contacto.png">
      <tr>
        <td width="35">&nbsp;</td>
        <td width="128">&nbsp;</td>
        <td width="22" height="55">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><label for="consulta"></label>
        <textarea name="consulta" cols="13" rows="8" class="transparente" id="consulta"></textarea></td>
        <td height="142">&nbsp;</td>
      </tr>
      <tr>
        <td height="24" colspan="3" align="center"><img src="jpg/bt_send.png" width="17" height="17" /></td>
      </tr>
    </table>
  </form>
</div></td>
            <td width="91" rowspan="3" align="right"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="49" height="568">
              <param name="movie" value="flash/bt_fotos.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="6.0.65.0" />
              <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="flash/bt_fotos.swf" width="49" height="568">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="6.0.65.0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
                <div>
                  <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
                </div>
                <!--[if !IE]>-->
              </object>
              <!--<![endif]-->
            </object></td>
          </tr>
          <tr>
            <td height="495">&nbsp;</td>
           <td><iframe id="box" src="fotos_galeria.php"></iframe></td>
            </tr>
          <tr>
            <td height="25">&nbsp;</td>
            <td>&nbsp;</td>
            </tr>
        </table>
      </div>
</td>
    </tr>
  </table>
</div>
 

en cuanto a la altura se mantiene en donde tiene que estar yo achico el alto de la ventana y le div con id posicion se mantiene acorde al resto del diseño.
pero si achico el ancho de la ventana el div se va corriendo para quedar a cierta posicion con repecto de la ventana y se corre de lugar respecto al resto del diseño :(

no se si estoy siendo claro, porque hasta yo me hise un pequeño lio con mis palabras jaaj si no se entiende diganme XD !!!
saludos

[ArturoGallegos]

jeje la verdad ando algo liado y me revolvi con todo lo que necesitas hacer... lo que si te puedo decir que cuando utilizas position absolute o fixed en cualquier elemento este toma su posision con respecto al primer elemento padre inmediato que cuente con position: en cualquiera de sus modalidades

por ejemplo para que tu div tome posición con respecto a la tabla que lo contiene deberás agregar position:relative al elemento padre inmediato

<table width="900" height="575" border="0" cellpadding="0" cellspacing="0" background="jpg/fondo_fotos1.jpg">
<tr>
<td width="106" height="28">&nbsp;</td>
<td width="703" style="position:relative"><div id="posicion">
<form id="form1" name="form1" method="post" action="">

[intiweb]

che no me funciona asi como me decis, sigue tomando la posicion con respecto de la ventana del explorador y no del objeto padre.