主要写关于层定位的相关知识浏览器
㈠定位概述spa
⑴像图像软件中的图层同样能够对每个layer可以精肯定位操做blog
⑵层定位的position属性决定了当前的一个网页元素，能够叠加到另外一个网页元素上面，那么咱们把这个网页元素称为一层，那么外面的元素称为父层，里面嵌入的元素称为子层图片
⑶position属性 （相对于谁定位）文档
fixed 固定定位 relative 相对定位 absolute 绝对定位it
⑷经过如下属性定位 （位置在哪里）io
①经过position属性设定它的参照物是最外层盒子，经过top属性设置当前盒子距离它的参照物上边界的距离，经过left，right，bottom属性设置当前盒子距离它的参照物左，右，下边界的距离。class
②采用z-index属性进行设定软件
对于它的参照物来讲，若是当前的这一层的z-index值比较小，好比说下层这一层z-index取值是1，上面这一层z-index取值是2，效果就是取值大的这一层会覆盖遮挡取值小的这一层。im
㈡position属性
⑴static：默认值
没有定位，元素出如今正常的流中（静态的，当前元素是文档流定位的方式），top，bottom，left，right，z-index无效
⑵fixed：固定定位
相对于浏览器窗口进行定位，top，bottom，left，right，z-index有效。
⑶relative：相对定位
相对于其直接父元素进行定位，top，bottom，left，right，z-index有效。
⑷absolute：绝对定位
相对于static定位之外的第一个父元素进行定位，top，bottom，left，right，z-index有效。
★什么叫直接父元素？
好比说，当前这一层它的父元素所在的位置，若是还有父元素的话，可是当前这一层是相对于它的紧邻的父元素来定位，这个就叫作直接父元素。
㈢固定定位 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定位机制——层定位的相关知识，但愿有所帮助。