Php 如何将DIV内容放置在表的顶部_Php_Javascript_Jquery

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

php javascript jquery

Php 如何将DIV内容放置在表的顶部,php,javascript,jquery,Php,Javascript,Jquery,我需要在一张表的顶部放置一个包装在div中的登录表单 <?php session_start(); $_SESSION['login_status']=null; ?> <html> <head> <link href="css/style.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Ty

我需要在一张表的顶部放置一个包装在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>


某页
使用名称：
帕瓦拉帕塞宫：
Nome Completo：
电邮：
使用名称：
帕瓦拉帕塞宫：


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

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

您可以使用或修改您希望位于顶部的内容的z索引
 您可以使用a或修改您希望位于顶部的内容的z索引
 将您的表和登录div包装到另一个div中，然后您可以在登录表单上使用绝对定位和z索引
<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>


...
...

这将使注册框完全覆盖登录框。
将您的表和登录div包装到另一个div中，然后您可以在登录表单上使用绝对定位和z索引
<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>


...
...

这将使注册框完全覆盖登录框。
如何
在#body

$('#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（“表格”）
怎么样
在#body

$('#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”）
工作起来很有魅力：）我刚刚调整了顶部和左侧的值以满足我的需要。非常感谢大家。工作起来很有魅力：）我只是稍微调整了一下顶部和左侧的值以满足我的需要。非常感谢大家。