确定包含块
一般情况：元素的包含块是最近的祖先块元素的内容区域
特殊情况：元素的包含块完全由这个元素的position属性确定
- positon: relative、static、sticky
- 包含块可能是它的最近的祖先块元素的内容区的边缘组成（inline-block, block 或 list-item 元素）
- 可能会建立格式化上下文 (比如说 a table container, flex container, grid container, 或者是 the block container 自身）
- positon: absolute
- 包含块由它最近的positon的值不是static的祖先元素的内边距的边缘组成（fixed、absolute、relative、sticky）
- positon: fixed
- 连续媒体包含块是viewport
- postion: absolute、fixed 包含块由满足以下条件的最近父级元素的内边距边缘组成
- transform、perspective的值不为none
- will-change的值是 transform、perspective
- filter的值不是none或will-change的是filter（firefox下有效）
- contain的值是paint
- backdrop-filter的值不是none
备注：根元素 (<html>) 所在的包含块是一个被称为初始包含块的矩形。
他的尺寸是视口 viewport (for continuous media)
根据包含块确定百分比值
- height、top、bottom根据包含块height计算（包含块的height根据内容变化，而且positon:relative/static 这些值的计算值为auto）
- width、left、right、margin、padding这些属性的百分比的计算值通过包含块的width计算
标签：positon,container,包含,元素,fixed,block From： https://www.cnblogs.com/tangshidedabenniao/p/17729979.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block
https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport