如何将 DIV 内容放在表格的顶部
[英]How to place DIV content on TOP of a Table
问题描述
I need to place a login form which is wrapped in a div on top of a table.
我需要放置一个登录表单，该表单包含在表格顶部的 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>
4 个解决方案
解决方案1
1 已采纳 2011-06-13 14:34:28
style.css样式.css
.box { position: absolute; top: 200px; left: 45%; }
解决方案2
0 2011-06-13 14:35:04
You could use a Jquery Dialog or modify the z-index of the content you wish to sit on top.您可以使用Jquery 对话框或修改您希望放在顶部的内容的 z-index。
解决方案3
0 2011-06-13 14:40:13
Wrap your table and login div in another div, then you can use absolute positioning and z-index on the login form.将您的表格和登录 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>
This'd make the registration box completely cover up the login box.这会使注册框完全覆盖登录框。
解决方案4
0 2011-06-13 14:54:07
how about insertBefore() insertBefore()怎么样
with the required divs being inserted just before the #body在#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');
});
});
or if you really want it right on top of the table.. .insertBefore("table")或者如果你真的想要它在桌子的顶部.. .insertBefore("table")
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.