我需要将一个登录表单放在表顶部的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>
style.css
.box { position: absolute; top: 200px; left: 45%; }
您可以使用Jquery对话框或修改您希望位于顶部的内容的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>
这会使注册框完全覆盖登录框。
在#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")