【前端-css：position】

前端-css：position:relative，absolute，fixed，static，sticky

.divb{
left: 100px;
top: 100px;
}
//此时改变left、top的值，div是不会发生变化的。因为此时默认定位是position:staic，即没有定位，意味着div不知道根据谁去定位

1、position:relative;

相对定位，相对于自己本身在正常文档流中的位置¹进行定位，相对它原来的位置。

(1)、不加定位(即:position:static)的div：

.divb{
		//(不写:即默认static)
	}

不加position的div(即默认static)自己在浏览器里有一个位置

不加position(即默认static)的多个div默认垂直排列

(2)、加上relative定位的div

.divb{}
.div1,.div2,.div3{
        //1、(不写:即默认static)
        //2、position:static;
		//3、position:relative;
}

加了position：relation的多个div依旧默认垂直排列,和之前效果相同

再加上距离–3个div不同的移动

.div1{
		position: relative;
		left: 10px;
}
.div2{
		position: relative;
		top:-10px;
}
.div3{
		position: relative;
		right: 10px;	
}

此时从图中可以看出：relation–相对移动是相对它之前最初开始的位置，此时可以重叠。

2、position:absolute;

绝对定位，相对于最近一级定位不为static的父元素进行定位。（子决父相）。

(1)、父级div-不加定位(即:position:staic)，子级div加上position:absolute;

.divb{}
div1{
		position: relative;
		left: 10px;
}
.div2{
		position: relative;
		top:-10px;
}
.div3{
		position: relative;
		right: 10px;	
}

此时父级div没有定位，absolute,让子级div根据更上一个父级body进行定位

(2)、父级div-加相对或绝对定位:(即:position:relative;/position:absolute)，子级div加上position:absolute

.divb{
        position: relative;
}
div1{
		position: relative;
		left: 10px;
}
.div2{
		position: relative;
		top:-10px;
}
.div3{
		position: relative;
		right: 10px;	
}

此时父级div有定位，absolute,让子级div根据父级div进行定位，此时可以重叠。

3、position:fixed;

固定定位，（老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位 跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。
补充：子级div的定位缺少横轴或纵轴的定位的话，自己div会继承父子的定位（）

.divb{
		margin-left: 100px;
}
.div1{
		position: fixed;
		/* left: inherit; */
		top:10px;
}
.div2{
		position: fixed;
		top:0px;
		left: 30px;
.div3{
		position: fixed;
		left: 0px;
		top: 30px;
}

子级div1继承父级的margin-left

4、position:static;

默认值，代表没有定位，元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移我们几乎不用。

5、position:sticky;

粘性定位,基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

总结

最常用：
position:relation; --相对定位-----相对于-------自己最开始的位置— ----定位----，可以实现重叠
position:absolute; --绝对定位------绝对于–最近非static的父级的位置—定位----，可以实现重叠

---

1. 无论有没有给元素一个position(默认自带：positon:static)，元素出生时自带一个位置。 ↩︎