为何未定义高度的父元素中，绝对定位元素的top/bottom百分比仍生效？

我之前一直以为CSS里的百分比值必须依赖显式定义的参考长度才能生效，比如给元素设置height: %时，必须父元素有明确的高度值才能计算。但最近测试发现绝对定位元素的top、bottom属性完全不是这么回事：

举个例子，父元素设为position: relative，高度完全由内部内容撑开，没有显式设置height值；子元素是绝对定位，设置top: 50%后，居然能精准地相对于父元素的实际高度的50%来定位，哪怕父元素的内容高度变化，这个百分比定位依然有效。而且我确认了这和margin-top/margin-bottom那种参考宽度的百分比不一样。

想请教两个问题：

1. 为什么绝对定位的top/bottom百分比可以在父元素没有显式定义高度的情况下生效？
2. 还有哪些CSS场景下，百分比值不需要参考长度显式定义也能正常计算？

示例代码 #

.parent_element{ 
  background:#55cc55; 
  position:relative; 
}
.child_element{ 
  background:#dd5555; 
  position:absolute; 
  top:50%; 
}

<div class="parent_element">
  <div class="child_element"> this is<br>a<br>test </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet rutrum est. Mauris sed sollicitudin erat, a condimentum diam. Duis nec dui nec nibh tempus condimentum. Suspendisse potenti. Quisque ligula augue, bibendum sed eros sed, molestie tempus sapien. Nullam auctor rutrum arcu, eget vehicula turpis mattis at. Cras elit erat, pulvinar ut placerat sed, pulvinar eu arcu. Curabitur pulvinar pharetra nisl non imperdiet. Duis vehicula euismod turpis, sit amet euismod nisi tincidunt nec. Ut congue tristique diam, ac egestas dui egestas quis. Quisque vitae sapien quis nisi facilisis suscipit a a velit. Vestibulum ut vestibulum velit, sed gravida est. Integer placerat nisl enim, vel suscipit tellus cursus eu. In aliquet malesuada nisi, a aliquet nisi. Etiam volutpat, lacus a condimentum laoreet, purus augue cursus tortor, sed sollicitudin nisi risus non est. Etiam eleifend sollicitudin tortor sit amet semper. Duis tempus sed nisl in condimentum. Fusce sit amet ornare nibh. Vivamus sit amet massa velit. Donec non quam nec risus cursus tincidunt nec aliquet leo. Cras et eros eget justo ultricies laoreet. Suspendisse maximus felis at augue viverra, id iaculis urna commodo. Nulla erat lacus, ultrices quis maximus non, consectetur eget elit. In hac habitasse platea dictumst. Nullam porttitor in nibh at hendrerit. Phasellus sit amet tristique purus, eu vulputate augue. Nunc ultrices magna libero, ut fringilla nibh hendrerit quis. Nullam imperdiet ornare dolor, viverra aliquam tortor cursus sed. Suspendisse finibus venenatis magna, eu porta elit bibendum in. Sed vitae hendrerit lacus. Sed porttitor tempus magna, in convallis augue pulvinar eu. Aenean et mi fermentum nunc elementum dapibus. Maecenas vulputate sodales magna, vitae commodo lorem dictum eu. Aliquam placerat risus ipsum, posuere lacinia dolor dapibus sit amet. Suspendisse sem ex, venenatis non semper aliquet, semper sollicitudin augue. Aenean arcu dui, vulputate ac sapien in, mollis maximus purus.
</div>

问题一：绝对定位元素top/bottom百分比的特殊逻辑 #

这其实是CSS定位规范里明确规定的行为——绝对定位元素的垂直偏移属性（top/bottom）的百分比参考的是包含块的"实际高度"，而这个高度不需要显式定义，只要包含块是正常格式化上下文的一部分，浏览器就能先算出它的实际高度，再用来计算偏移量。

这里的核心原因有两点：

1. 当父元素设置position: relative后，它就成为了子绝对定位元素的包含块，所有偏移属性都基于这个包含块计算。
2. 绝对定位元素脱离了正常文档流，不会影响包含块的高度计算。浏览器可以先渲染包含块里的流内容（比如示例里的大段文本），算出包含块的实际高度，再用这个高度的百分比来定位绝对元素——完全不存在普通元素height: %那种"父元素高度依赖子元素，子元素高度又依赖父元素"的循环依赖问题。

对比普通元素的height: %：因为普通元素在文档流里，父元素的height: auto是由子元素撑起来的，如果子元素又用百分比高度，浏览器无法打破这个循环，所以必须要求父元素有显式的高度值。

问题二：其他无需显式参考长度的百分比场景 #

除了绝对定位的top/bottom，这些场景的百分比值也不需要参考长度显式定义就能生效：

• 绝对定位的left/right百分比：和垂直方向逻辑一致，参考包含块的实际宽度（哪怕宽度是auto，由内容或容器撑开）。
• transform中的百分比值：比如transform: translateY(50%)，这里的百分比参考的是元素自身的高度（不是父元素），哪怕元素自身高度是auto，浏览器也能先算出元素的实际尺寸，再应用transform的百分比偏移。
• Grid布局中的轨道尺寸百分比：比如grid-template-rows: 50% auto，这里的50%参考Grid容器的实际高度，哪怕容器高度是auto（由内容撑开），浏览器会先计算容器总高度，再分配轨道的尺寸比例。
• Flex布局中的flex-basis百分比：如果Flex容器主轴是垂直方向，flex-basis: 50%参考容器的实际高度；水平方向则参考宽度，不管容器尺寸是否为auto都能正常计算。
• background-position的百分比：比如background-position: 50% 50%，这个百分比的计算逻辑是：(元素自身尺寸 - 背景图片尺寸) × 百分比，所以不管元素自身尺寸是否是auto，都能精准定位背景位置。

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