你知道 CSS 中不同属性设置为百分比%时对应的计算基准？

公式：当前元素某CSS属性值 = 基准 * 对应的百分比
元素的 position 为 relative 和 absolute 时，top和bottom、left和right基准分别为包含块的 height、width
元素的 position 为 fixed 时，top和bottom、left和right基准分别为初始包含块（也就是视口）的 height、width，移动设备较为复杂，基准为 Layout viewport 的 height、width
元素的 height 和 width 设置为百分比时，基准分别为包含块的 height 和 width
元素的 margin 和 padding 设置为百分比时，基准为包含块的 width（易错）
元素的 border-width，不支持百分比
元素的 text-indent，基准为包含块的 width

元素的 border-radius，基准为分别为自身的height、width
元素的 background-size，基准为分别为自身的height、width
元素的 translateX、translateY，基准为分别为自身的height、width
元素的 line-height，基准为自身的 font-size

元素的 font-size，基准为父元素字体

感谢广东一位小伙伴的回答

场景： wrap包含par包含cont

分析：

absolute准确的说是基于包含absolute的最近的非静态定位的块来定位。

如果par是静态定位（即不写定位或者position: static），wrap是非静态定位，如position: relative，那么cont设置绝对定位时，是相对wrap来定位的，百分比基准自然也是相对于wrap。如果包含cont的所有块都是静态定位，那么cont将相对于body进行定位。 fixed也并不基于浏览器的窗口宽高来定位的，如果包含某个fixed的块的最近的祖先有设置transform，如平移translate或旋转rotate，那么fixed的块将相对于这个祖先开始定位。