Written primarily related knowledge about the positioning of layers
(I) Targeting Overview
⑴ image of the image layer as software may be capable of accurately positioning operation for each layer
⑵ layer is positioned property determines the current position of a page element, the element may be superimposed above to another page, then the page elements we called this layer, the outer layer is called the parent element, embedded inside the element referred to as sub Floor
⑶position property (who is positioned relative)
fixed fixed positioning relative absolute relative positioning relative positioning
By positioning ⑷ following properties (where position)
① set its reference position property is the outermost layer of the box, this box is provided on its distance from the boundary of the reference object by left right, bottom property, the current from the box through its top left reference property right from the lower boundary.
② The z-index attribute setting
For its reference, if the current z-index of this layer is relatively small value, for example, a lower layer which is a z-index value, above which is a value of z-index layer 2, the effect is a large value of this layer will cover the value of small block of this layer.
㈡position property
⑴static: defaults
No positioning element occurs in the normal flow (static, the current element is positioned document flow mode), top, bottom, left, right, z-index is invalid
⑵fixed: fixed positioning
With respect to the browser window positioning, top, bottom, left, right , z-index valid.
⑶relative: relative positioning
Relative to its immediate parent element is positioned, top, bottom, left, right , z-index valid.
⑷absolute: absolute positioning
Relative to the first parent element is positioned outside the static positioning, top, bottom, left, right , z-index valid.
★ What is the direct parent element?
比如说，当前这一层它的父元素所在的位置，如果还有父元素的话，但是当前这一层是相对于它的紧邻的父元素来定位，这个就叫做直接父元素。
㈢固定定位 position：fix
⑴当前有一个盒子，它是固定定位的方式，它的参照物是浏览器本身。
特点：不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素。
⑵不管参照物是谁，它的坐标原点始终在参照物的左上角，如下图，（0.0）是坐标原点，向右为水平的x轴，向下为垂直的y轴，向右方向值取正值，向左方向取值为负值。
举例：
㈣相对定位 position：relative
★relative：定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。
举例说明：
下图就是相对定位，在属性设定的时候，将宽和高设定出来，设置它的定位方式是相对定位，它的位置是相对于它的父元素top和left属性设置的，分别为20px。
下面看设定为相对定位之后的变化：
⑴初始状态下，它还是文档流定位：
⑵设置完相对定位，它会脱离文档流位置，由top和left来决定，向右下方倾斜，但是由于它的原来在文档流当中的位置依然是被保留的，所以位于它下面的另外一个static类型的元素没有去占据它的位置。
㈤绝对定位： position：absolute
absolute：定位为absolute的脱离正常的文本流，但与relative的区别是其在正常流中的原位置不再存在。
举个案例：下面是它的代码部分
下面看它出现的变化：
⑴现在是它初始状态下，文档流定位方式
⑵现在是它脱离文档流，它的位置上和左分别是20px，这时候由于它原来的位置会被丢失，所以它下面的这一静态的定位，也就是默认的文档流定位的元素会向上移动，占据原有这个元素它的位置，这个就是排列之后的效果：
以上为相对定位和绝对定位之间第一个区别。
现在说它们之间的第二个区别：
⒈relative定位的层总是相对于其直接父元素而言的，无论其父元素是什么定位方式。
⒉absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。对于absolute定位的层，如果其父层中都未定义absolute或relative，则其将将对body进行定位。
用表格的方式总结这两者之间的区别
㈥relative+absolute
⑴父元素box1：position：relative；
⑵子元素box2：position：absolute；
⑶子元素box2：top，bottom，left，right相对于父元素来进行偏移定位。
我们通常会将外层的父元素box1设置为相对定位，然后将它的内层子元素box2设置成绝对定位。
优点：当父元素box1移动时，当它移动到另一个位置，子元素是相对于父元素的位置进行定位的，所以它们两个可以一起被移动。
具体应用：
⑴当前有这样一幅图片，要在这个图片上面显示一层文字，要做到使这个文字也需要跟着移动。
⑵做法：采用层定位relative+absolute，让后面的这个盒子做父元素，里面添加图片，然后父元素里面还包含一个子元素，就是文字，然后让子元素叠加到图片上面，这样做就可以了，具体的代码和图片示例如下图所示：
以上就是CSS定位机制——层定位的相关知识，希望有所帮助。