html - 将 DIV 放置到页脚顶部的问题

Question

尽管 bottom: 200px; 是页脚的高度，但为什么我的“页脚顶部栏”没有粘在页脚顶部？你知道吗？谢谢参见 http://jsfiddle.net/9h5RW/

HTML

  <header></header>
  <h1>Headline</h1>
  <p class="blablatext">Blablabla blablabla baba bkabkabkaba</p>
  <footer class="clearfix">
    <footer class="footer-top-bar">footer top bar</footer>
    <footer class="footer-left">footer left</footer>
    <footer class="footer-middle">footer middle</footer>
    <footer class="footer-right">footer right</footer>
  </footer>

CSS:

body {
  background-color: rgb(255, 255, 255);
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(21, 84, 244);
}

h1 {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 9px;
  padding-right: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  font-size: 37px;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(0,0,0);
}

header {
  width: 100%;
  height: 600px;
  min-height: 300px;
  margin-right: auto;
  margin-left: auto;
  background: red;
}

.blablatext {
  margin-right: auto;
  margin-left: auto;
  padding-top: 14px;
  padding-right: 14px;
  padding-bottom: 14px;
  padding-left: 14px;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(21, 84, 244);
}

.footer-left {
  float: left;
  width: 33.3333333333%;
  height: 200px;
  background-color: rgb(25, 193, 215);
}

.footer-middle {
  float: left;
  width: 33.3333333333%;
  height: 200px;
  background-color: rgba(164, 41, 41, 0.96);
}

.footer-right {
  float: left;
  width: 33.3333333333%;
  height: 200px;
  background-color: rgba(240, 45, 191, 0.96);
}

.footer-top-bar {
  position: absolute;
  bottom: 200px;
  left: 0;
  right: 0;
  z-index: 6;
  width: 100%;
  height: 37px;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(231, 86, 33);
}

Answer 1

使用不同的方法:

footer {
    position: relative; // so that top bar is pos. relative to footer element
}

.footer-top-bar {
    bottom: 0px;
}

http://jsfiddle.net/9h5RW/1/