divs flotantes

[viringas]

hola a todos, vereis tengo el siguiente codigo:

Código HTML:

<div id="flotante">
        <!-- este div cargara el codigo para cada boton en la vista de administrador -->
    </div>
 

en este div, se carga el siguiente codigo:

Código HTML:

<p class="titulo">
                MODIFICACION DE UNA NUEVA PUBLICACION.
</p>
<br>
<br>    
 
<?php
include("funcPublicaciones.php");
 
$numPubli = ContarPublicaciones();
?>
<i style="margin-left:60px;"> hay <?php echo $numPubli ; ?> publicaciones almacenadas. </i> 
<br><br><br>
<?php
//echo("hola1111");
$arrayDatos = mostrarPublicaciones();
 
for($n = 0; $n < $numPubli; $n++){
?>
 
<table class="texto" style="display:inline-table">
    <tbody>
        <tr>
            <td valign="top">
                <table width="100%" style="margin-left:50px;">
                    <tbody >
                        <tr>
                            <td colspan="2">                
                            </td>
                        </tr>
                        <tr>
                            <td class="texto2"> Nombre: </td>
                            <td> <?php echo($arrayDatos[$n]->getNombrePublicacion()); ?> </td>
                        </tr>
                        <tr>
                            <td class="texto2"> a&ntilde;o: </td>
                            <td> <?php echo($arrayDatos[$n]->getAutorPublicacion()); ?> </td>
                        </tr>
                        <tr>
                            <td class="texto2"> autor: </td>
                            <td> <?php echo($arrayDatos[$n]->getAnhoPublicacion()); ?> </td>
                        </tr>
                       
                        
                        <tr>        
                            <td> <input type="submit" onClick="<?php echo($arrayDatos[$n]->getIdPublicacion());?>" class="btModPublic" value="modificar publicacion"/> </td>
                        </tr>
                    </tbody>
                </table>  
            </td>
          
        </tr>
    </tbody>
</table>
 
<?php } ?>
 
 
<script>
    $(".btModPublic").click(function(event){
        var id = $(this).attr('onClick');
        event.preventDefault(); 
        $.post("pedirDatosModificacionPublic.php",{id:id },function(data){
            $("#dato").fadeIn(200).html(data);
        });
        
    });
 
</script>
 
 
<section id="dato" style="display:none; width:200px; height:auto;">
 
<!-- en este div se cargaran los datos para realizar la modificacion al pinchar sobre el boton de modificar datos -->
 
</section>
 

ahora hago lo siguiente, en el <section id="dato"> cargo un html que contiene esto:

Código HTML:

<?php
$num = $_POST['id'];
//echo("hola");
//echo($id);
//exit;
 
?>
 
 
<form method="post" action="modificaDatosPublicacion.php" id="formModPublic" class="texto2">
nombre:
<input type="text" name="modpublic" id="modpublic" size="25" class=":required" /> <br>
an&ntilde;:
<input type="text" name="modanhopublic" id="modanhopublic" size="25" class=":required :number :length;4 :only_on_blur" /> <br>
autor/es:
<input type="text" name="modautorpublic" id="modautorpublic" size="25" class=":required" /> <br>
revista:
<input type="text" name="modrevpublic" id="modrevpublic" size="25" class=":required" /> <br>
comentario:
<input type="text" name="modcomentpublic" id="modcomentpublic" size="25" class=":required" /> <br>
<input type="hidden" name="idpublic" id="idpublic" value="<?php echo($num);?>"/>
 
<input type="submit" class="btModPublicacion" id="btModPublicacion" name="btModPublicacion" value="modificar datos publicacion"/>
 
</form>     
 
<div class="msg" style="display:none;" >
    <p class="texto">
        PUBLICACION MODIFICADA SATISFACTORIAMENTE.
    </p>
</div> 
 
 
 
<script>
 
$("#formModPublic").submit(function(event){
 
event.preventDefault();
 
    $.ajax({
        type: "POST",
        url: "modificaDatosPublicacion.php",
        data: $("#formModPublic").serialize(),
        success: function(){
            $("#formModPublic").hide(function(){$('div.msg').fadeIn().fadeOut(3000);}); 
            $("#flotante").fadeOut(4000);
        }  
    }); 
});
 
</script>
 
 
mi problema es el siguiente:
 
el section id="dato" siempre me lo pone  debajo del div id="dato", y yo lo q kiero es q me lo ponga encima de el, no debajo, no se si tengo q aplicar alguna propiedad css o algo pero, keria q me lo pusiera encima x razones de estetica y facilidad de cara al publico, ya que en el div id="flotante" va a ser muy grande y tp kiero q la gente tenga q coger y tener q a la rueda del raton tener q visualizar el section id="dato"
 
 
si alguien sabe q propiedad tengo q aplicar me seria de gran ayuda
 
gracias