Question

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

我已尝试将#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

设置一个位置：＃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;
  }

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

1 个答案: