drawing a div on top of the rest without using absolute positioning_问答_开发者

drawing a div on top of the rest without using absolute positioning

开发者 https://www.devze.com 2023-01-19 07:55 出处：网络

I have the following code <div id=\"header\" class=\"row\"> <ul id=\"topnav\"> <li> <a href=\"#\">a</a>

相关专题：css

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!