0

In the following HTML, the <h4>Sign up</h4> element is hidden by the top bar. Shouldn't it be automatically appearing underneath the top bar? If I add <br><br> before it, it displays fine. Why is it not appearing underneath the top bar?

jsFiddle

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    	<meta charset="utf-8" /> 
    	<title>Elephant2</title> 
    	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
    	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css">
    
    
    </head> 
    <body> 
    	<div class="container"> 
    		<header> 
    			<div class="topbar-wrapper" style="z-index: 5;"> 
    				<div class="topbar"> 
    					<div class="container fixed"> 
    						<h3><a class="logo" href="">Project Name</a></h3> 
    						<nav> 
    							<ul> 
    								<li class="active"><a href="">Home</a></li> 
    								<li><a href="/users/sign_up">Sign up</a></li> 
    								<li><a href="/users/sign_in">Sign in</a></li> 
    							</ul> 
    						</nav> 
    					</div> 
    				</div> 
    			</div> 
    		</header> 
    
    
    		<h4>Sign up</h4> 
    
    		<form accept-charset="UTF-8" action="/users" class="user_new" id="user_new" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4PQpcNt+xUaRJOr/ZFNrNSLMOCsL/1FZlf/hso1HgKs=" /></div> 
    
    
    			<p> 
    				<label for="user_email">Email</label> 
    				<div class="input"> 
    					<input id="user_email" name="user[email]" size="30" type="text" value="" /> 
    				</div> 
    			</p> 
    
    			<p> 
    				<label for="user_password">Password</label> 
    				<div class="input"> 
    					<input id="user_password" name="user[password]" size="30" type="password" /> 
    				</div> 
    			</p> 
    
    			<p> 
    				<label for="user_password_confirmation">Password confirmation</label> 
    				<div class="input"> 
    					<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> 
    				</div> 
    			</p> 
    
    			<div class="actions"> 
    				<p><button type="submit" class="btn primary">Submit</button></p> 
    				<a href="/users/sign_in">Sign in</a><br /> 
    
    
    				<a href="/users/password/new">Forgot your password?</a><br /> 
    
    
    
    			</div> 
    		</form> 
    
    
    	</div> 
    </body> 
    </html>

4

3 回答 3

4

div.topbar is position: fixed which takes it out of normal flow so it does not affect the position of any content that follows it.

于 2011-08-20T06:53:34.513 回答
3

If you notice in twitter.com, the top bar is fixed as you scroll. The same applies here since you're using Bootstrap; it is supported by the position: fixed style in the Bootstrap stylesheet. As Quentin says, this causes the top bar to be removed from normal element flow so it doesn't push the rest of the content down.

Your <br><br> tags serve to push the content down, making space for the top bar to sit on top of, but a better way to pad your page content is to add top padding or a top margin to your content instead.

于 2011-08-20T07:00:13.507 回答
0

I have added a parent div for topbar, specifying the height of .topbar and position relative, and it working perfect.

    <header> 
        <div class="topbar-wrapper" style="z-index: 5;"> 
            <div style="height:40px; position:relative;"><div class="topbar"> 
                <div class="container fixed"> 
                    <h3><a class="logo" href="">Project Name</a></h3> 
                    <nav> 
                        <ul> 
                            <li class="active"><a href="">Home</a></li> 
                            <li><a href="/users/sign_up">Sign up</a></li> 
                            <li><a href="/users/sign_in">Sign in</a></li> 
                        </ul> 
                    </nav> 
                </div>
                </div> 
            </div> 
        </div> 
    </header>
于 2011-08-20T13:17:49.463 回答