如何将flex容器内指定元素独立移动到页面右上角？

需要将侧边栏内的Case Code标题移动到屏幕右上角，现有侧边栏为JS动态控制显隐的flex容器，直接给目标元素加position: absolute未生效。

JS逻辑 #

function openNav() {
  console.log("opennav");
  document.getElementById("mySidenav").style.display = "flex";
}

function closeNav() {
  console.log("closenav");
  document.getElementById("mySidenav").style.display = "none";
}

现有CSS #

.sidenav .action-object {
  display: block;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  color: white;
  background: none;
  font-size: 24px;
}

.sidenav {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 120;
  top: 0;
  left: 0;
  background-color: blue;
  overflow-x: hidden;
  /*padding-top: 60px;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

现有HTML结构 #

<div id="mySidenav" class="sidenav">
  <!--<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>-->
  <h1 class="sideNavCaseCode">Case Code</h1>
  <button class="action-object" data-action="goto" data-info="home" onclick="closeNav()">Home</button>
  <button class="action-object" data-action="goto" data-info="search" onclick="closeNav()">Search</button>
  <button class="action-object" data-action="goto" data-info="evidence" onclick="closeNav()">People</button>
  <button class="action-object" data-action="goto" data-info="people" onclick="closeNav()">Evidence</button>
  <button class="action-object" data-action="goto" data-info="tools" onclick="closeNav()">Tools</button>
  <button class="action-object" data-action="goto" data-info="questions" onclick="closeNav()">Questions</button>
</div>

给目标元素设置position: absolute未生效，核心是两个配置缺失：

• 仅声明了定位属性，未设置top/right等偏移值，元素会停留在原文档流位置
• 父容器.sidenav本身已设置position: absolute，属于已定位祖先元素，子元素绝对定位会相对该全屏容器计算坐标，完全适配右上角定位需求，无需改动现有flex布局和JS显隐逻辑。

直接追加.sideNavCaseCode的样式即可实现右上角定位：

.sideNavCaseCode {
  position: absolute;
  top: 24px; /* 距离屏幕顶部的间距，可根据视觉需求调整 */
  right: 24px; /* 距离屏幕右侧的间距，可根据视觉需求调整 */
  margin: 0; /* 清除h1标签默认的上下外边距，避免定位偏移 */
  color: #ffffff;
}

效果说明：设置绝对定位后，Case Code元素会脱离flex布局流，不会参与父容器的居中计算，剩下的导航按钮会保持在屏幕垂直水平居中的位置，不会被标题元素挤动。

可选适配优化 #

如果在小屏幕设备上，右上角的标题和居中的导航按钮出现重叠，可以取消.sidenav里注释的padding-top配置，同时加盒模型属性避免容器溢出：

.sidenav {
  /* 原有样式保持不变，追加/放开以下两行 */
  padding-top: 80px;
  box-sizing: border-box;
}

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