绝对定位元素至绝对定位父元素：侧边导航菜单按钮定位问题

我来帮你搞定这个定位问题～你遇到的核心问题有两个：一是设置position:absolute给按钮后，menu高度塌陷成0；二是按钮的定位基准不对，跑到了导航栏外面。咱们一步步来解决：

问题根源 #

1. 当你给.btn设置position:absolute时，它会脱离文档流，导致.menu里没有任何占据空间的元素，所以高度直接变成0。
2. 因为.menu没有设置position:relative，.btn的绝对定位会以最近的有定位的祖先元素（也就是.fixed）为基准，所以right:0是相对于整个导航栏的右侧，而不是.menu的右侧，最终按钮就跑到了导航栏外面。

解决方案一：用相对定位+绝对定位组合（传统方案） #

给.menu添加position:relative，让按钮的绝对定位基准变成.menu；同时给.menu设置最小高度或者内边距，避免高度塌陷：

.fixed { 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 200px; 
  border:solid; 
} 
.menu { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  border: solid; 
  position: relative; /* 关键：让子元素的absolute以自己为基准 */
  min-height: 40px; /* 给menu设置最小高度，防止高度塌陷 */
  padding: 8px; /* 可选：给按钮留点左右空间 */
  box-sizing: border-box; /* 确保padding不会超出menu宽度 */
} 
.btn { 
  position: absolute; 
  right: 8px; /* 配合padding调整右侧距离 */
  top: 50%; /* 可选：让按钮垂直居中 */
  transform: translateY(-50%); /* 可选：垂直居中的关键 */
  border: solid; 
}

解决方案二：用Flex布局（更简洁现代） #

直接把.menu改成flex容器，通过flex属性让按钮靠右，还能避免高度塌陷的问题，代码更简洁：

.fixed { 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 200px; 
  border:solid; 
} 
.menu { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  border: solid; 
  display: flex; /* 启用flex布局 */
  justify-content: flex-end; /* 让子元素靠右对齐 */
  align-items: center; /* 让按钮垂直居中 */
  padding: 8px; 
  box-sizing: border-box; 
} 
.btn { 
  border: solid; 
}

这两种方法都能完美解决你的问题，个人更推荐Flex布局，代码更简洁，也不用处理高度塌陷的问题～

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