0

次の HTML では、<h4>Sign up</h4>要素はトップ バーによって隠されています。トップバーの下に自動的に表示されるべきではありませんか? その前に追加<br><br>すると、正常に表示されます。トップバーの下に表示されないのはなぜですか?

jsフィドル

 <!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これはposition: fixed、通常の流れからそれを取り除き、それに続くコンテンツの位置に影響を与えません。

于 2011-08-20T06:53:34.513 に答える
3

twitter.comで気がつけば、スクロールするとトップバーが固定されています。Bootstrap を使用しているため、ここでも同じことが当てはまります。position: fixedBootstrap スタイルシートのスタイルでサポートされています。Quentin が言うように、これにより、トップ バーが通常の要素フローから削除され、残りのコンテンツが押し下げられなくなります。

<br><br>タグはコンテンツを押し下げ、トップバーが上に収まるスペースを作る役割を果たしますが、ページ コンテンツをパディングするより良い方法は、コンテンツにトップ パディングまたはトップ マージンを追加することです。

于 2011-08-20T07:00:13.507 に答える
0

トップバーの親divを追加し、.topbarの高さと相対位置を指定すると、完全に機能します。

    <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 に答える