Static positioning is the default that every element gets. It just means "put the element into its normal position in the document flow — nothing special to see here."
他跟static很相似, 占据在正常的文档流中, 跟static唯一的区别就是它可以和其他元素重叠, 并且可以通过top bottom left right去设置dom的位置.
例如图片中黄色组件, 通过设置top: 30px; left: 30px, 将会让这个元素相对于static向下和向右移动30px
脱离了正常的文档流, 可以看到蓝色的dom挤在了一起, 黄色元素像不复存在一样. 该黄色dom位于独立的一层, 这个时候设置top bottom left right 已经不是relative相对位置, 而是相对于页面的位置. 例如图中通过设置top: 30px; left: 30px, 元素会相对于页面向下和向右移动30px
Let's now look at fixed positioning. This works in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport. (An exception to this occurs if one of the element's ancestors is a fixed containing block because its transform property has a value other than none.) This means that you can create useful UI items that are fixed in place, like persistent navigation menus that are always visible no matter how much the page scrolls.
relative是相对于原始static位置进行offset, absolute脱离通常的文档流, 相对于<body>位置进行offset. 但是如果给一个祖先元素设置relative, 某个子元素设置absolute. 则子元素的环境上下文改变, 它不是相对于<body>进行offset, 而是将设置了relative的祖先元素视为上下文环境, 进行偏移
