drawing a div on top of the rest without using absolute positioning
I have the following code
<div id="header" class="row">
<ul id="topnav">
<li>
<a href="#">a</a>
<span><a href="#">aa</a> <a href="#">ab</a></span>
</li>
<li>
<a href="#">b</a>
<span><a href="#">ba</a> <a href="#">bb</a></span>
</li>
<li style="float: right;"><a href="#">Login</a></li>
</ul>
<div id="login_container">
<form method="post" id="login_form">
<table>login form</table>
</form>
<form method="post" id="create_account_form">
<table>create account form</table>
</form>
</div>
</div>
<div id="content">
content here
</div>
The header is about 60px tall and 960px wide, centered in the browser window and sticking to the top of the viewport. When the user clicks on "Login" the #login_container reveals itself. However, I want to position it aligned right with the header row, not aligned to the right of the viewport. I can do that by not using 'position: absolute' when styling #login_container, however, 开发者_如何学Pythonthen the login form gets cut-off because the containing #header div is not tall enough. In other words, I want the #login_container aligned with the right edge of #header, but laid on top of #content, if any.
You could either set
#header {
position: relative;
height: 60px;
}
#login_container {
position: absolute;
right: 0;
top: 60px; /* equal to #header height, if it's not fixed, you should retrieve it dynamically via jQuery */
}
and then dynamically retrieve #content's size and apply it to #login_container.
Otherwise, and maybe even better, you could wrap the whole code in a #container div, set its width to whatever width you wish the site to have, set it centered, then move #login_container from inside #header to immediately after it and with absolute position. You will have a cleaner css code and less meddling to do with jQuery (just setting login_container's height).. so it should be like this (if I'm not missing anything):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#login_container {
position: absolute;
right: 0;
width: 100%;
z-index: 10;
}
#content {
position: relative;
z-index: 0;
}
</style>
<!--[if lte IE 6]><style type="text/css"></style><![endif]-->
</head>
<body>
<div id="container">
<div id="header" class="row">
<ul id="topnav">
<li>
<a href="#">a</a>
<span><a href="#">aa</a> <a href="#">ab</a></span>
</li>
<li>
<a href="#">b</a>
<span><a href="#">ba</a> <a href="#">bb</a></span>
</li>
<li style="float: right;"><a href="#">Login</a></li>
</ul>
</div>
<div id="login_container">
<form method="post" id="login_form">
<p>login form</p>
</form>
<form method="post" id="create_account_form">
<p>create account form</p>
</form>
</div>
<div id="content">
content here
</div>
</div>
</body>
</html>
Give it a try and let me know if you still got problems!
加载中,请稍侯......
精彩评论