Question

我需要在表格顶部放置一个包含div的登录表单...

<?php
session_start();
$_SESSION['login_status']=null;
?>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Somepage</title>

<script type="text/javascript" src="classes/jquery.js"></script>

<script>
<!--
$(document).ready(function() {

    $('#register').hide();
    $('#login').hide();

    $("a:#loginLnk").click(function(){
        $('#register').fadeOut('slow', function(){
            $('#login').fadeIn('slow');
        });
    });

    $("a:#registerLnk").click(function(){
        $('#login').fadeOut('slow', function(){
            $('#register').fadeIn('slow');
        });
    });

    return false;
});

//-->
</script>

</head>
<body>
    <table id="wrapper">
        <tr>
            <td>
                <!-- Banner -->
                <div>
                    <img src="images/banner.gif" />
                </div> <!-- Menu -->
                <div class="navBar">
                <?php
                include 'menu.php';
                ?>
                </div> <!-- Corpo -->
                <div id="body">
                <?php
                include 'body.php';
                ?>

                <!-- 
                    LOGIN OR REGISTER
                 -->
                    <div class="box" id="login">
                        <form action="" method="post">
                        <fieldset>  
                            <label for="username">Nome de utilizador:</label>
                            <input name="username" type="text" />
                            <label for="password">Palavra-passe:</label>
                            <input name="password" type="password" /> 
                            <input type="submit" value="Entrar" />
                        </fieldset> 
                        </form>
                    </div>

                    <div class="box" id="register">
                        <form action="" method="post">
                        <fieldset>  

                            <label for="name">Nome Completo:</label>
                            <input name="name" type="text" />

                            <label for="mail">E-Mail:</label>
                            <input name="mail" type="text" />

                            <label for="username">Nome de Utilizador:</label>
                            <input name="username" type="text" />

                            <label for="password">Palavra-passe:</label>
                            <input name="password" type="password" /> 
                            <br/>
                            <input type="submit" value="Registar" />

                        </fieldset> 

                        </form>
                    </div>

                </div>

                <!-- Footer -->
                <div class="navBar" id="footer">
                <?php
                include 'footer.php';
                ?>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

<强>的style.css

.box { position: absolute; top: 200px; left: 45%; }

Answer 2

您可以使用Jquery Dialog或修改您希望置于顶部的内容的z-index。

Answer 3

将您的表包装并在另一个div中登录div，然后您可以在登录表单上使用绝对定位和z-index。

<div style="position: relative">
   <div id="login" style="z-index: 0">
      ...
   </div>
   <div id="register" style="position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1">
      ...
   </div>
</div>

这会使注册框完全覆盖登录框。

Answer 4

insertBefore()

怎么样？

在#body

之前插入所需的div

$('#register').hide();
$('#login').hide();

$("#loginLnk").click(function(){
    $('#register').fadeOut('slow', function(){
        $('#login').insertBefore('#body').fadeIn('slow');
    });
});

$("#registerLnk").click(function(){
    $('#login').fadeOut('slow', function(){
        $('#register').insertBefore('#body').fadeIn('slow');
    });
});

或者如果你真的希望它在桌面上.. .insertBefore("table")

如何将DIV内容放在表格的顶部

4 个答案: