从头学前端-CSS基础04

> 边偏移决定了改元素的最终位置；CSS中有top left right bottom四个属性；配合定位属性position使用

- 静态定位static

	> 是元素的默认定位方式，按照标准流特性摆放位置，没有偏移

- 相对定位relative
	

	>元素在移动时会以自己原来的位置移动； 原来在标准流中的位置还保留,后面的盒子以标准流对待它(不脱标)

- 绝对定位absolute

	> 绝对定位是元素在移动位置的时候，是相对于它祖先元素移动；
	 > 如果没有祖先元素或祖先元素没有定位，则以浏览器为准对齐
	 > 如果祖先元素有定位，则以最近一级有定位的祖先元素为准移动位置；
	 > 觉得定位不占用原来标准流的位置，即脱标

- **子绝父相**：
	

	>子元素是绝对定位， 父元素则需要是相对定位，因为相对定位会保留位置，而绝对定位不保留位置；

- 固定定位fixed
	

	> 以浏览器的可视窗口为准移动元素
	> 与父元素没有任何关系
	> 不随着滚动条的滚动而滚动
	> 不占用标准流的位置，是一种特殊的绝对定位
	

-  粘性定位 sticky 
	> 粘性定位可以被认为是相对定位和固定定位的混合

	> 已可视窗口为参考点
	> 占有标准流位置
	> 必须要有left，top right bottom中的一个属性
	

- 定位总结；
![在这里插入图片描述](https://img-blog.csdnimg.cn/579ee88163ba4c43b586a52a441084c4.png)

- 定位布局的叠放顺序属性 z-index
	

	>默认值auto,属性为数字，可以有负值，但没有单位

	>当都没有z-index属性，按照属性叠放,后来居上

- 绝对定位盒子居中：
	 > left和top 设置 父元素宽度50%

	 > margin-left和margin-top设置自身元素宽度的一半

- 定位的特殊特性

	> 行内元素添加定位，可以直接设置宽度和高度
	> 块内元素添加定位，默认的是内容的高度和宽度
	> 脱标的盒子不会触发外边距塌陷问题

- 浮动和定位的区别： 
 > 浮动会压住后面的盒子，不会压住盒子中的文字；(浮动最初的目的是为了做文字环绕效果的，文字会围绕着浮动元素)

>  绝对定位会压住标准流的盒子内容；