Why is the H4 element not visible in this HTML?
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="✓" /><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>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.
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.
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>
加载中,请稍侯......
精彩评论