为何绝对定位元素会受限于父元素高度？

问题描述 #

给类名为.position-not-working的<div>设置*position: absolute*，期望它脱离文档流、不受父元素高度限制独立显示，但元素完全不显示，只有给.cell-container设置固定高度时才正常显示，疑惑为何绝对定位元素会受限于.cell-container。

核心原因 #

1. 包含块与高度塌陷：.position-not-working的最近非static定位父元素是.outer-wrapper（设置了*position: relative*），但.position-not-working是绝对定位，脱离了文档流，导致.outer-wrapper没有可占据空间的内容，高度直接塌陷为0。
2. Flex布局的高度限制：.cell-container是.row-container（height: 20px、*align-items: center*）的Flex子元素，由于内部.outer-wrapper高度为0，.cell-container自身高度也被压缩为0。
3. 溢出隐藏裁剪：.cell-container设置了*overflow: hidden*，即使.position-not-working相对于.outer-wrapper定位，也会因为.cell-container高度为0且溢出隐藏，被完全裁剪掉。

当给.cell-container设置固定高度时，.cell-container有了明确的高度范围，溢出隐藏的区域不再是0，.position-not-working就能显示出来。

解决方案 #

方案1：调整包含块层级 #

把.row-container设置为*position: relative*，让.position-not-working相对于更高层级的.row-container定位，脱离.cell-container的限制：

.row-container {
  display: flex;
  width: 50%;
  align-items: center;
  background-color: hotpink;
  height: 20px;
  position: relative; /* 添加这行 */
}

.outer-wrapper {
  display: flex;
  flex-direction: column;
  /* 移除position: relative */
}

同时可以根据需求调整.position-not-working的top/right值，比如：

.position-not-working {
  width: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0; /* 根据需要调整 */
}

方案2：移除.cell-container的溢出隐藏 #

直接去掉.cell-container的*overflow: hidden*属性，这样即使.cell-container高度为0，绝对定位元素也不会被裁剪：

.cell-container {
  flex-grow: 1;
  justify-content: flex-end;
  flex-shrink: 1;
  flex-basis: 0;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  /* 移除overflow: hidden */
  text-overflow: ellipsis;
  flex-grow: 1;
  justify-content: flex-end;
  position: relative;
}

方案3：让.cell-container获得足够高度 #

修改.row-container的*align-items*属性为stretch，让.cell-container高度撑满.row-container的20px高度：

.row-container {
  display: flex;
  width: 50%;
  align-items: stretch; /* 从center改为stretch */
  background-color: hotpink;
  height: 20px;
}

或者直接给.cell-container设置最小高度，确保它有足够的显示空间：

.cell-container {
  /* 其他样式不变 */
  min-height: 20px;
}

内容的提问来源于stack exchange，提问作者four-eyes