定位

定位

将指定元素摆放到页面的任意位置，通过定位可以任意的摆放元素。
通过position属性来设置定位。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

当开启了元素的定位，可以通过left 、right、top、boottom四个属性来设置元素的偏移量

left:元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边偏移量
boottom：元素相对于其定位位置下边的偏移量

相对定位（postion:relative）

特点：

1. 当开启了元素的相对定位以后，而不设偏移量时，元素不会发生变化。
2. 相对定位是相对于元素在文档流中原来的位置进行定位。
3. 相对定位的元素不会脱离文档流。
4. 相对定位会使元素提升一个层级。
5. 相对定位不会改变元素的性质

.box{
	width:500px;
	heigth:500px;
	postion:relative；
	/*相对于原来位置向左移动200px*/
	left：200px；
}

绝对定位（postion:absolute）

特点：

1. 开启绝对定位，会使元素脱离文档流。
2. 开启绝对定位以后，如果不设置偏移量，则元素不会发生变化。
3. 绝对定位是相对于离他最近的开启了定位的祖先元素经行定位。
4. 绝对定位会使元素提升一个层级
5. 绝对定位改变元素的性质
   内联元素变成块元素，块元素的宽度和高度被默认内容撑开

固定定位（postion:fixed）

特点：

1. 和绝对定位一样
2. 固定定位在浏览器窗口的某个位置，不会随滚动条滚动

区别：

1. 固定定位永远相对于浏览器窗口经行定位

层级（z-index）

如果定位元素的层级是一样的，则下面的元素会覆盖上边的元素。
可以使用z-index属性可以设置元素的层级
可以给z-index指定一个整数作为值，该值会作为当前元素的层级，层级越高，越优先显示。
对于没有开启定位的元素不能使用z-index。

来源：CSDN

作者：要脸的鱼

链接：https://blog.csdn.net/weixin_45736498/article/details/104797910