相对定位，绝对定位，固定定位

1 定位

1.1 相对定位

① 如何设置相对定位

position: relative;

② 相对定位元素定位的参考点

自己原来在文档流中的位置。

③ 相对定位元素的特点

1. 相对定位的元素不会脱离文档流
2. 虽然元素设置了相对定位，其他元素排列显示的时候亦然参照相对定位元素原来的位置。
3. 设置了相对定位之后，元素原来的显示模式没有影响，相对定位也可以与浮动一起设置。

1.2 绝对定位

① 如何设置绝对定位

position: absolute;

② 绝对定位元素定位的参考点

绝对定位元素参考它的包含块进行定位。
绝对定位元素的包含块： 是第一个定位（任何定位都可以）的祖先元素，如果祖先元素都没有定位，就是整个页面。
没有定位的元素的包含块： 父元素。

③ 绝对定位元素的特点

1. 绝对定位的元素脱离文档流， 相邻的元素或父元素在文档流中会忽略其存在。
2. 绝对定位的元素，默认宽高被自身内容撑开，可以完美设置4个方向内外边距。
3. 不论元素原来是行内、行内块、块级以及浮动元素，设置了绝对定位之后，就按照绝对定位元素的特点。

1.3 固定定位

① 如何设置为固定定位

position: fixed;

② 固定定位的元素定位参考点

固定定位元素参考它的包含块进行定位。
固定定位元素的包含块：视口。 与祖先元素是否定位无关（与绝对定位元素的区别！）

③ 固定定位元素的特点（同绝对定位）

1. 固定定位的元素脱离文档流， 相邻的元素或父元素在文档流中会忽略其存在。
2. 固定定位的元素，默认宽高被自身内容撑开，可以完美设置4个方向内外边距。
3. 不论元素原来是行内、行内块、块级以及浮动元素，设置了固定定位之后，就按照固定定位元素的特点。

1.4 定位层级 z-index

1. 默认情况，定位的元素显示在不定位元素的上面； 各定位元素之间，后面的元素显示在上面。
2. 使用 z-index 可以设置定位元素的显示层级，只有定位的元素设置 z-index 才能生效。
3. z-index 的值是个数字，数字越大显示层级越高； 如果数字小于0，显示层级会低于不定位的元素。

1.5 定位相关 CSS 属性

CSS 属性名	功能	属性值
position	设置定位	static： 不定位，默认值。 relative： 相对定位。 **absolute：**绝对定位。 fixed： 固定定位。
left	距离参考点左边距离	长度
right	距离参考点右边距离	长度
top	距离参考点上边距离	长度
bottom	距离参考点下边距离	长度
z-index	设置显示层级	数字（正负值）

1.6 定位的特殊应用

① 定位元素的默认宽度计算

1. 定位的元素如果设置了宽度，不要同时设置 left 和 right； 设置了高度，不要同时设置top和bottom。
2. 定义的元素如果没有设置宽度，可以利用同时设置 left 和 right，调整元素默认宽度的计算。

② 设置定位元素在包含块中水平垂直都居中

方案一：

给定位的元素进行设置：

position: absoltue;
left: 50%;
top: 50%;
margin-left: -宽度/2;
margin-right: -高度/2;

方案二：

给定位的元素进行设置：

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;