CSS定位

CSS定位

在文本中，每个标记都被限制了自身的位置。在CSS中，我们可以通过定位属性（position）来设置定位方式，从而改变元素的位置。
定位属性（position）可以实现该表元素位置，将元素定义在想出现的任何位置，应用得当，效果相当炫酷。

语法格式：

	position：static/relative/absolute/fixed/sticky
	static: 	无特殊定位
	relative：相对定位
	absolute: 绝对定位
	fixed: 	固定定位
	sticky:	黏性定位

定位方式的区别：
当定位属性position：static/relative/absolute/fixed/sticky时，元素定位情况如下图。

当定位属性为position：static时，无定位效果，用于取消元素的定位效果。

当定位属性position：relative时，如果没有定位偏移，对元素本身没有影响，遵循文档流，原位置会被保留，不影响其他元素布局，当定位偏移时，元素会相对于自身原位置进行定位。




当定位属性position：absolute时，使元素完全脱离文档流，使内联元素具备块元素的特性，使块元素具备内联元素的特性，如果祖先元素设置定位，定位元素相对于祖先元素定位，如果祖先元素没有设置定位，则相对于整个文档定位。



当定位属性position：fixed时，使元素完全脱离文档流，使内联元素具备块元素的特性，使块元素具备内联元素的特性，定位元素相对于浏览器窗口进行定位，不受滚动条和祖先元素的影响。



当定位属性position：fixed时，在没到达指定位置时，无定位效果，到达指定位置，具有固定定位效果。

总结：

	1.相对定位参照物是自己本身；
	2.绝对定位参照物是包含块；
	3.固定定位的参照物是浏览器窗口；
	4.黏性定位初始无效果，到达指定位置后与固定定位相同；
	5.相对定位不脱离文档流，对布局无影响；
	6.绝对定位，固定定位脱离文档流，原本位置不再占用，后面元素会补上去。

补充：

在我们应用定位属性时，多个被定位元素之间可能会出现层叠的效果，这时我们可以通过z-index来对元素层叠的顺序进行调整。

语法格式：

	z-index：auto/number
	auto：默认值
	number: 无单位的整数值,，可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上，该属性只针对有定位属性的元素。