Question

在以下HTML中，顶部栏隐藏了<h4>Sign up</h4>元素。它不应该自动出现在顶栏下面吗？如果我在它之前添加<br><br>，它显示正常。为什么它没有出现在顶栏下面？

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

Answer 1

div.topbar是position: fixed，它将其从正常流程中取出，因此它不会影响其后的任何内容的位置。

Answer 2

如果您在twitter.com中注意到，顶部栏会在您滚动时固定。这同样适用于你使用Bootstrap;它由Bootstrap样式表中的position: fixed样式支持。正如Quentin所说，这会导致顶部栏从正常的元素流中移除，因此它不会推动其余的内容。

您的<br><br>代码用于推送内容，为顶部栏留出空间，但填充页面内容的更好方法是为内容添加顶部填充或上边距代替。

Answer 3

我为topbar添加了一个父div，指定了.topbar和position relative的高度，并且它工作正常。

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

为什么H4元素在此HTML中不可见？

3 个答案: