克隆Twitter信息流时Edit Profile按钮无法右移的问题求助

我正在克隆Twitter信息流，重构个人资料区域的.edit-profile按钮，但没法把这个元素移到封面照片下方容器的右侧。已经用了display:flex和flex-direction:column，设置align-items:end后布局完全没变化。

相关代码 #

HTML代码

<body>
    <div class="container">
      <div class="box">
        <div class="nav-box">
          <div class="nav-grid">
            <ion-icon class="twitter-logo" name="logo-twitter"></ion-icon>
            <nav class="main-nav">
              <ul class="main-nav-list">
                <li>
                  <ion-icon class="nav-icon" name="home-outline"></ion-icon
                  ><a class="main-nav-link" href="#">Home</a>
                </li>
                <li>
                  <ion-icon class="nav-icon" name="earth-outline"></ion-icon
                  ><a class="main-nav-link" href="#">Explore</a>
                </li>
                <li>
                  <ion-icon
                    class="nav-icon"
                    name="notifications-outline"
                  ></ion-icon
                  ><a class="main-nav-link" href="#">Notifications</a>
                </li>
                <li>
                  <ion-icon class="nav-icon" name="mail-open-outline"></ion-icon
                  ><a class="main-nav-link" href="#">Messages</a>
                </li>
                <li>
                  <ion-icon class="nav-icon" name="bookmark-outline"></ion-icon
                  ><a class="main-nav-link" href="#">Bookmarks</a>
                </li>
                <li>
                  <ion-icon
                    class="nav-icon"
                    name="document-text-outline"
                  ></ion-icon
                  ><a class="main-nav-link" href="#">Lists</a>
                </li>
                <li>
                  <ion-icon class="nav-icon" name="person-outline"></ion-icon
                  ><a class="main-nav-link" href="#">Profile</a>
                </li>
                <li>
                  <ion-icon
                    class="nav-icon"
                    name="ellipsis-horizontal-circle-outline"
                  ></ion-icon
                  ><a class="main-nav-link" href="#">More</a>
                </li>
              </ul>
            </nav>
            <a class="btn-Tweet" href="#">Tweet</a>
          </div>
        </div>
        <div class="main-box">
          <div class="name-attributes">
            <ion-icon
              class="main-box-arrow"
              name="arrow-back-outline"
            ></ion-icon>
            <div class="name-attribute">
              <p class="main-box-name">James Holland</p>
              <p class="main-box-tweets">1,789 Tweets</p>
            </div>
          </div>
          <div class="main-box-profile">
            <img
              class="profile-cover"
              src="subscription1.png"
              alt="profile cover photo"
            />
            <img class="profile-img" src="ben.jpg" alt="profile photo" />
            <div class="main-edit-profile">
              <a class="edit-profile" href="#">Edit profile</a>
            </div>
          </div>
        </div>
        <div class="side-box">asdfg</div>
      </div>
    </div>
  </body>

CSS代码

.main-box {
  border-width: thin;
  border-left: solid 1px #cfcfcf;
}

.main-box-name {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.main-box-tweets {
  font-size: 1rem;
  color: #777;
}

.main-box-arrow {
  color: #fff;
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 1rem;
  font-weight: 500;
}

.main-box-arrow:hover {
  color: #0db924;
}

.name-attributes {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.main-box .main-box-profile {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}

.profile-cover {
  position: relative;
  width: 100%;
  height: 30vh;
}

.profile-img {
  position: absolute;
  transform: translate(10%, 75%);
  border-radius: 100%;
  border: 3px solid black;
}

.main-box-profile .edit-profile {
  position: absolute;
  text-decoration: none;
  align-items: end;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
  padding: 1rem 2rem;
}

问题核心是绝对定位的参考容器错误，以及align-items属性的使用场景错误（该属性仅作用于flex容器，而非子元素）。以下提供两种可行修复方案：

方案一：修正绝对定位逻辑 #

.main-box .main-box-profile {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  position: relative; /* 新增：让子元素绝对定位基于当前容器 */
}

.profile-cover {
  width: 100%;
  height: 30vh;
  /* 移除多余的position:relative，父容器已设置 */
}

.main-box-profile .edit-profile {
  position: absolute;
  text-decoration: none;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
  padding: 1rem 2rem;
  right: 1rem; /* 强制靠右 */
  top: calc(30vh + 1rem); /* 垂直定位在封面照片下方，1rem为间距 */
}

方案二：用flex布局替代绝对定位（更规范） #

修改HTML结构

<div class="main-box-profile">
  <img class="profile-cover" src="subscription1.png" alt="profile cover photo" />
  <img class="profile-img" src="ben.jpg" alt="profile photo" />
  <!-- 新增按钮容器，用于flex布局控制位置 -->
  <div class="edit-profile-wrapper">
    <a class="edit-profile" href="#">Edit profile</a>
  </div>
</div>

对应CSS修改

.edit-profile-wrapper {
  display: flex;
  justify-content: flex-end; /* 让内部元素靠右 */
  padding: 1rem;
}

.main-box-profile .edit-profile {
  text-decoration: none;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
  padding: 1rem 2rem;
  /* 移除原有的position:absolute */
}

两种方案都能实现按钮靠右的效果，方案二更符合flex布局的设计逻辑，避免绝对定位可能引发的布局冲突。

内容的提问来源于stack exchange，提问作者Beren