今天小编跟大家讲解下有关css position属性为absolute时其百分值的计算 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css position属性为absolute时其百分值的计算 的相关资料，希望小伙伴们看了有所帮助。
当position为absolue时候 其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。
首先我们必须知道：
1、[百分比的参照][1]：
根据包含块计算百分值（1）元素的margin/padding/left/right/width参照包含块的width来计算；（2）要计算 height /top 及 bottom 中的百分值 是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化 而且包含块的 position 属性的值被赋予 relative 或 static 那么 这些值的计算值为 0。
2、[确定包含块][2]：
确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
（1）如果 position 属性为 static 或 relative 包含块就是由它的最近的“祖先块元素”（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘（content）组成的。
（2）如果 position 属性为 absolute 包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）祖先元素的内边距区的边缘（padding-left + content + padding-right）组成。
<!DOCTYPE html><html lang="en"><head> <style> body { color: orange;}div { position: absolute; width: 400px; border: 5px solid orange; padding: 50px; height: 160px; background: lightgray;}p { position: absolute; height: 25%; margin: 5%; border: 5px solid orange; padding: 5%; background: pink; color: green;} height: 25%; margin: 5%; border: 5px solid orange; padding: 5%; background: pink; color: green;}*/ </style></head><body> <div> <p>This is a paragraph!</p> </div></body></html>以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
