具有最大宽度的相对父元素中的绝对元素

Question

我试图将#header-supporter定位在#header-image (重叠)的右下角。困难的部分是通过在max-width上设置1280 to以使其与站点边距的其余部分保持一致来做到这一点。

我已经尝试过将#header-supporter直接放在#header中，但是我不能使用max-width，因为#header-image需要是全宽度的。

这是我的标记：

  <header id="header">
    <div id="header-image">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Header&w=1920&h=200" /></a>
    </div>
    <div id="header-supporter-cont">
      <div id="header-supporter">
        <div>
          Lead Supporter
        </div>
        <img src="http://placeholdit.imgix.net/~text?txtsize=14&w=65&h=65" />
      </div>
    </div>
  </header>

这是一支钢笔：http://codepen.io/ourcore/pen/ObBWaY。

Answer 1

设置一个位置:相对于#标题-支持-连续，底部而不是顶部在#头-支持

http://codepen.io/anon/pen/ENdWgE

 #header-supporter-cont {
  margin: 0 auto;
  max-width: 1280px;
  position: relative;

  #header-supporter {
    position: absolute;
    bottom: 0;
    right: 0;
  }