CSS 常用定位方式

常用的定位方式

<style>
		 .test_box{
			 position: absolute;/* 绝对定位，相对于 static 定位以外的第一个父元素进行定位。*/
			 position: fixed;/* 固定定位，相对于浏览器窗口进行定位。*/
			 position: relative;/* 相对定位的元素，相对于其正常位置进行定位。*/
			 position: sticky;/* 粘性定位，该定位基于用户滚动的位置。*/
		 }
		/* [粘性定位详解] https://blog.csdn.net/qq_26330543/article/details/110524114*/
</style>

如上是常用的几种定位方式：这里简单介绍前三种，第四种粘性定位请参考链接地址

绝对定位

绝对定位有两种

<style>
		 .test_box{
			 position: absolute;/* 绝对定位，相对于 static 定位以外的第一个父元素进行定位。*/
			 position: fixed;/* 固定定位，相对于浏览器窗口进行定位。*/
		 }
</style>

固定定位也是绝对定位的一种。
两个绝对定位的区别：
position: absolute;
如注释，absolute 是相对于自身父级的绝对定位，假如A 是 B 的 父级，若 B 使用了 absolute ，那么B的位置就是相对于A的位置，B的位置 永远随着A的位置 变动而变动，B的 top：0px；left：0px； 永远是A的左上角的位置。 注：这里如果A没有使用position定位，那么默认其定位就是 position:static；那么此时B就会一直往上找，直到找到 position 定位不是static的为止，若全是static，那么找到html的位置为止
position: fixed;
如注释，fixed 会脱离文档流，相对于浏览器进行定位（实际就相当于 absolute 父级是HTML时候的定位）

子绝父相

<style>
		 .test{
			position:relative; /* 相对定位的元素，相对于其正常位置进行定位。*/
			width: 100px;
			height: 100px;
		 }
		 #test_child{
		 	 position: absolute;
			 top: 200px;
			 left: 300px;
			 width: 50px;
			 height: 50px;
			 background-color: #B3C0D1;
		 }
</style>

父相：
由于CSS默认定位 position 是 static，top和left都不生效，所以若想使用定位，又不想定位脱离文档流，所以经常采用相对定位 position:relative；
子绝：
根据绝对定位的特性可知，使用绝对定位 position: absolute; 可以使自身位置永远相对于父级位置变动而变动。
子绝父相应用场景：
根据上面解释可发现，平时我们大部分使用的定位场景都是子绝父相场景，都需要子元素依据父元素的位置变动而变动，例如广告窗的关闭按钮，永远在广告窗的右上角。所以说起定位大家一般都推荐子绝父相
固定（绝对）定位 position: fixed 应用场景：
平时大家浏览网页的时候可能发现，经常有一个联系方式漂浮在界面上一个位置，无论界面怎么拖动，联系方式位置都不变，这就说明，其位置是相对于浏览器窗口的，脱离了文档流，所以这里可以使用 position: fixed 固定(绝对)定位