Css flexbox元件上的绝对位置

我正在尝试将绝对元素（

#header supporter cont

）（绝对以重叠图像）与最大宽度为1280px的容器中的1.5%右边距右对齐。如果它是一个相对的元素，这将是非常容易的，但作为绝对的，我还没有能够实现这一点

作为补充说明，我试图在flexbox中这样做，因为简单地将

设置为正确：1.5%

，正如我最初所做的那样，不会将

#header supporter cont

中的内容与页面1280px水平边距的其余部分对齐，因为它从边到边计数

HTML:

演示：

• 原件，非flexbox：
• 不起作用的flexbox：

---

尝试更改

弹性方向：列的弹性方向

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

我在两支笔中看到的唯一区别是文本的位置。@Pangloss是的，在第一支笔中，它看起来很接近我想要实现的目标，但是右边距不正确；在第二种情况下，我尝试使用flexbox，但它看起来一点也不正确。很抱歉，我忘了提到这与
#页眉支架
有关。将#页眉支架从弹性方向的行更改为列。@Pangloss解决了将文本放置在图像上方的问题，但我正试图将文本和图像一起向右移动，就像在第一支笔中一样。直接将绝对值设置为打开#页眉支架计数
#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;
}

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