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

Question

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

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

这是我的标记:

  <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

设置一个位置:在#header-supporter-cont 上相对，在#header-supporter 上设置底部而不是顶部

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;
  }