CSS定位

Question

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

我会这样描述:

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

我尝试仅使用 CSS 重现此效果。 它工作得很好，但现在，我坚持将“列表”(在我的例子中是 figcaption)放在页面底部。 我希望此示例中“列表”的最后一个元素“第三标题”位于页面底部。

密码本:

http://codepen.io/AmauryH/pen/QKexJq

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
• 添加了“显示:表格单元格；垂直对齐:底部；”到这个 div
• 在标题中添加了“display:table”

codepen 已更新，似乎可以正常工作。