Css 在其余部分的顶部绘制div，而不使用绝对定位_Css

Css 在其余部分的顶部绘制div，而不使用绝对定位

css

Css 在其余部分的顶部绘制div，而不使用绝对定位,css,Css,我有以下代码 <div id="header" class="row"> <ul id="topnav"> <li> <a href="#">a</a> <span><a href="#">aa</a> <a href="#">ab</a></span>

我有以下代码

<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>









登录表单
创建帐户表单
满足于此

标题大约60像素高，960像素宽，在浏览器窗口中居中，并固定在视口顶部。当用户单击“Login”时#Login_容器就会显示出来。但是，我希望将其与标题行对齐，而不是与视口的右侧对齐。我可以通过在设置#login#u容器的样式时不使用“position:absolute”来实现这一点，但是，由于包含的#header div不够高，因此登录表单会被截断。换句话说，我希望#登录#容器与#标题的右边缘对齐，但放置在#内容的顶部（如果有）。

您可以设置

#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 */
}

然后动态检索#内容的大小并将其应用于#登录#容器

否则，甚至可能更好，您可以将整个代码包装在#container div中，将其宽度设置为您希望站点具有的任何宽度，将其设置为居中，然后将#login#container从内部#标题移动到紧跟其后的绝对位置。您将有一个更干净的css代码和更少的jQuery干预（只需设置登录容器的高度）。。所以应该是这样的（如果我没有遗漏任何东西）：


森扎·蒂托洛文件
* {
保证金：0；
填充：0；
}
#容器{
宽度：960px；
保证金：0自动；
位置：相对位置；
}
#登录容器{
位置：绝对位置；
右：0；
宽度：100%；
z指数：10；
}
#内容{
位置：相对位置；
z指数：0；
}







登录表单
创建帐户表单
满足于此

试试看，如果你还有问题就告诉我

我不确定我是否完全理解你的意思。。是否希望登录容器与#标题的右侧对齐，并同时包含#标题和#内容？不，我希望它包含#内容，但与#标题的右侧和底部对齐。因此，它将显示为一个下拉面板。您是在不使用javascript的情况下尝试这样做，还是解决方案可以包含一些脚本？哦，还有一点需要注意：如果您将登录按钮/链接向右浮动，您应该将其放在代码中其他表单元素之前，以便与其他表单元素对齐，而不是在下面的线上。是的，就是这样。非常感谢。诀窍是让容器具有相对位置，然后让容器中的内容具有绝对位置。

<!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>