Css定位

Question

我尝试实现和本站一样的效果 http://www.rumba.com.br/

我会这样描述：

元素（或标题）列表
将鼠标悬停在列表的某个元素上时，背景中会出现一张图片

我尝试用 CSS-only 重现这种效果。它工作得很好，但现在，我坚持将 "list" （在我的例子中是 figcaption）放在页面底部。我希望本示例中 "list"、"Title three" 的最后一个元素位于页面底部。

代码笔：

HTML :

    <header>
        <figure>
        <figcaption>Title One</figcaption>
        <img src="http://amauryhanser.com/vrac/01.png" />
    </figure>
    <figure>
        <figcaption>Title Two</figcaption>
        <img src="http://amauryhanser.com/vrac/02.png" />
    </figure>
    <figure><figcaption>Title Three</figcaption>
        <img src="http://amauryhanser.com/vrac/03.png" />
    </figure>
</header>
<section>
    Remaining content...
</section>

SCSS :

@import "compass/css3";
@import "compass/reset";

* {
  @include box-sizing(border-box);
}
html {
  height:100%;
}
body {
  background: #000;
  height:100%;
  color:white;
}

header {
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  figure {
    width:400px;
    figcaption {
      margin: 10px 20px;
      z-index:2;
      cursor: pointer;
      font:40px arial, sans-serif;
      color:#fff;
      &:hover + img{
        @include opacity(1);
      }
    }
    img {
      z-index:-1;
      position:absolute;
      left:0;
      top:0;
      @include opacity(0);
      width:100%;
      @include transition(opacity 2s ease-in-out);
    }
  }
  & + section {
    background:#333;
    height: 500px;
  }
}

你有什么想法吗？提前致谢！

阿莫里

Answer 1

所以，这是我解决问题的方法：

添加了一个 div 包装所有
已将 "display: table-cell; vertical-align: bottom;" 添加到此 div
已将 "display:table" 添加到 header

codepen 已更新，似乎可以使用。

Css定位

Css positioning

css

sass

compass