Posicionar form de login acima de banner no topo da página

Bom dia,

Tenho um form de login na parte superior da página, ele aparece em todas. No entanto seu posionamento está incorreto pois não consegui posiciona-lo como deveria:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.sisflex.com.br/form_topo.jpg&key=47a770b8a662e1bed1cc0166f6642fc9abdd265ac0885c49e35b603a3a12f7d4" alt="form_topo.jpg" />

<div id="banner">
<div id="login_topo">
 <h1>Área Pais - Alunos</h1>
 <form id="logar_topo" name="logar_topo" method="post" action="logar.php" >
 <label class="campo_logar" for="codigo">Código de acesso:</label><input type="text" class="data_logar" name="codigo" id="codigo" maxlength="50" tabindex="1" title="Seu código para Acesso"/>
 <label class="campo_logar" for="senha">Senha: </label><input type="password" class="senha_logar" name="senha" id="senha" maxlength="90" tabindex="2" title="Sua Senha" />
	<input type="submit" name="Submit" class="botao" value="OK" tabindex="3" />
 </form>
 <p><a href="esqueci_senha.php">Esqueci a senha!</a></p>
 <p><a href="primeiro_acesso.php">Primeiro Acesso!</a></p>
</div><!-- login -->
<div id="logo">
 <a href=""><img class="escola" src="/imagens/imagem.png" alt="" /></a>
 <img src="/imagens/imagem.gif" class="ocultar" alt="" />
</div><!-- logo -->
<div id="photos">
 <img src="/imagens/banner/DSC01977.JPG" alt="" title=""/>
</div>

o css

#banner{width:988px;height:258px;margin:0 auto;z-index:10;background:url(http://www.escolametropolitana.com.br/imagens/layout/back_topo.png) top right no-repeat;}
#logo {width:210px;height:205px;margin:20px 0 0 0;z-index:11;float:left}
#logo img.escola{margin:10px 0 5px 30px}
/login_topo/
#login_topo {width:210px;height:90px;font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;float:right;position:absolute;right:23px;top:3px;z-index:50;}
#login_topo h1{width:90%;text-align:center;font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;margin:0 0 0 20px;color:#C00;clear:left}
#login_topo p{text-align:right;margin:0}
#login_topo a, #login_topo a:link, #login_topo a:visited, #login_topo a:active, #login_topo a:hover{color:#C00;text-decoration:underline;font-weight:bold}
#login_topo a:hover{text-decoration:underline}
/formulario de login/
#logar_topo{width:98%;height:auto;float:right;margin:1px 0 0 0;font-size:12px}
#logar_topo fieldset{float:left;width:99%;margin:0 1px}
#logar_topo label.campo_logar{width:100px;display:block;float:left;clear:left;text-align:right;margin:0 5px 0 0}
#logar_topo input.data_logar, #logar_topo input.senha_logar{width:80px;height:13px;border:1px dashed #C00;background-color:#FFF;margin-bottom:3px}
#logar_topo input.data_logar{clear:right}
#logar_topo input.senha_logar{width:60px;clear:none;margin:0}
.botao {width:20px;height:15px;background-color:#C00;font:bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#FFF;float:right;cursor:pointer;margin:1px 10px 0 2px}
/banner/
#photos{width:740px;height:205px;position:relative;float:right;margin:8px 25px 0 0;z-index:-10;background-color:#FFF}

Se eu retiro o position:absolute;right:23px;top:3px; ele fica no lugar, MAS a imagem embaixo a imagem do banner desce e desce todo o restante do conteudo

como posso arrumar isso?

desde já agradeço a qualquer ajuda