Question

我试图将一个绝对元素（#header-supporter-cont）（绝对重叠图像）与最大宽度容器中的1.5％右边距右对齐1280px。如果它是一个相对元素，这很容易，但作为绝对，我无法实现这一点。

作为旁注，我尝试在flexbox中执行此操作，因为只是像我原来那样设置right: 1.5%，并不会将#header-supporter-cont中的内容与其他内容对齐页面的1280px水平边距，因为它从边缘到边缘计数。

HTML：

<header id="header">
  <div id="header-cont">
    <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Header%20Image&w=1920&h=200" /></a>
    <div id="header-supporter-cont">
      <div id="header-supporter">
        <div id="header-supporter-text">
          Image text here
        </div>
        <a href="#" target="_blank"><img src="https://www.aexp-static.com/nav/ngn/img/logo_bluebox_1x.gif" /></a>
      </div>
    </div>
  </div>
</header>

CSS：

#header {
  margin: 0;
  width: 100%;
  height: auto;
  position: relative;
}
#header #header-cont a {
  display: block;
}
#header #header-cont a img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
#header #header-cont #header-supporter-cont {
  margin: 0 auto;
  max-width: 1280px;
  margin: 0 1.5%;
  position: relative;
}
#header #header-cont #header-supporter-cont #header-supporter {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: absolute;
  bottom: 20px;
  right: 0;
}
#header #header-cont #header-supporter-cont #header-supporter #header-supporter-text {
  padding-bottom: 5px;
  font-size: 0.75em;
}
#header #header-cont #header-supporter-cont #header-supporter #header-supporter-text span {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
#header #header-cont #header-supporter-cont #header-supporter a {
  display: block;
}
#header #header-cont #header-supporter-cont #header-supporter a img {
  width: 55px;
}

演示：

原创，非Flexbox：http://codepen.io/ourcore/pen/ggoebB
无效的flexbox：http://codepen.io/ourcore/pen/oBpqqy

Answer 1

尝试更改flex-direction: column;

的弹性方向

#header-supporter {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                position: absolute;
                bottom: 20px;
                right: 0;}

flexbox元素的绝对位置

1 个答案: