代码之家 › 专栏 › 技术社区 › punkish

不使用绝对定位在其余部分上绘制div

css

punkish · 技术社区 · 14 年前

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

1 回复 | 直到 14 年前

marc_s 8 年前

你可以设定

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

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

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

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

推荐文章