确定包含块的过程完全依赖于这个包含块的 position 属性：
如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
如果 position 属性是 fixed，包含块就是由 viewport (in the case of continuous media) 或是组成的。
如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
注意: 根元素()所在的包含块是一个被称为初始包含块的矩形。
根据包含块计算百分值
display相关总结
display 属性规定元素应该生成的框的类型。
display:none
此元素不会被显示。
display:block
此元素将显示为块级元素，此元素前后会带有换行符。
display:inline
此元素会被显示为内联元素，元素前后没有换行符。例如
display:inline-block
行内块元素。例如
position相关总结：
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position 属性值的含义：
static
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置.
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。
absolute
绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
sticky
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
overflow属性
weight height 定义viewport（视窗）的大小，overflow 超过窗口部分滚动查看。
总结
position定位的是content的位置。
static就是呆着应该呆的地方，正常的定位。
relative相对于父元素移动。或者相对于正常的定位移动。
absolute跳出正常文档流，以包含元素定位。被包含在relative定位的包含块中相对定位。
z-index 定义了Z轴，通过赋值，高的值在低值的上层。